https://cn.vuejs.org/v2/guide/transitions.html https://godbasin.github.io/vue-ebook/vue-ebook/6.html#_6-1-transition-%E7%BB%84%E4%BB%B6

    Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点

    对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。
    image.png

    1. <template>
    2.   <!-- transition的使用 -->
    3.   <div id="demo">
    4.     <button v-on:click="show = !show">
    5.       Toggle
    6.     </button>
    7.     <transition name="fade">
    8.       <p v-if="show">hello</p>
    9.     </transition>
    10.   </div>
    11. </template>
    13. <script>
    14.   new Vue({
    15.     el: "#demo",
    16.     data: {
    17.       show: true
    18.     }
    19.   });
    20. </script>
    22. <style>
    23.   /* 简单的css transition实现动画 */
    24.   .fade-enter-active,
    25.   .fade-leave-active {
    26.     transition: opacity 0.5s;
    27.   }
    28.   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    29.     opacity: 0;
    30.   }
    31. </style>

    轮播图实现：
    https://code.h5jun.com/wife/48/edit?html,css,js,console

    1. <!DOCTYPE html>
    2. <!--
    3. Created using JS Bin
    4. http://code.h5jun.com
    6. Copyright (c) 2021 by mewcoder (//code.h5jun.com/wife/48/edit)
    8. Released under the MIT license: http://jsbin.mit-license.org
    9. -->
    10. <meta name="robots" content="noindex">
    11. <html>
    12. <head>
    13.   <meta charset="utf-8">
    14.   <meta name="viewport" content="width=device-width">
    15.   <title>JS Bin</title>
    16.   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    18. <style id="jsbin-css">
    19.   .slide-enter-active,
    20.     .slide-leave-active {
    21.       transition: transform .3s;
    22.     }
    24.     .slide-enter {
    25.       transform: translateX(100%);
    26.     }
    28.     .slide-enter-to {
    29.       transform: translateX(0);
    30.     }
    32.     .slide-leave {
    33.       transform: translateX(0);
    34.     }
    36.     .slide-leave-to {
    37.       transform: translateX(-100%);
    38.     }
    40.     .list {
    41.       position: relative;
    42.       width: 300px;
    43.       height: 200px;
    44.       border: 1px solid red;
    45.       overflow: hidden;
    46.     }
    48.     .item {
    49.       position: absolute;
    50.       top: 0;
    51.       left: 0;
    52.     }
    54.     img {
    55.       width: 100%;
    56.       height: 100%
    57.     }
    58. </style>
    59. </head>
    60. <body>
    61.   <div id="app">
    62.     <div class="list">
    63.       <div v-for="(item,index) in list" :key="index">
    64.         <transition name="slide">
    65.           <div v-if="index === currentIndex" :key="item" class="item">
    66.             <img :src="item" />
    67.           </div>
    68.         </transition>
    69.       </div>
    70.     </div>
    71.     <button @click="slide(-1)">-</button>
    72.   </div>
    73. <script id="jsbin-javascript">
    74.   // 重点好像在绝对定位
    75.   new Vue({
    76.     el: '#app',
    77.     data: {
    78.       currentIndex: 0,
    79.       list: ["https://p5.ssl.qhimg.com/t0119c74624763dd070.png",
    80.         "https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg",
    81.         "https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg",
    82.         "https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"
    83.       ],
    86.     },
    87.     methods: {
    88.       slide(step) {
    89.         this.currentIndex = (this.currentIndex + step + 4) % 4;
    90.       }
    91.     }
    92.   })
    93. </script>
    94. </body>
    97. </html>

    为什么用绝对定位? https://www.bilibili.com/video/BV1ht4y1D7C1?p=2 7:10左右