vue中过渡和动画结合

深碍√TFBOYSˉ_ 2022-04-15 02:59 202阅读 0赞

动画、过渡、页面加载时就有动画

2. 动画时长的设置

transition中的duration设置动画时长，单位是ms。注意：每个动画有自己的时长，各是各的，

我觉得吧，这个时长就是class样式存在的时间，动画和过渡跟他没有关系

<body>
      <div id="demo">
        <button @click="show = !show">click me</button>
        <transition name="fade" 
                    :duration="5000"
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear
                    appear-active-class="animated swing">
          <div v-if="show" class="de">sfsf</div>
        </transition>
      </div>
      <script>
        new Vue({
          el: '#demo',
          data: {
            show: true
          }
        })
      </script>
    </body>

![20181120192500785.png][]

也可以具体设置enter和leave的时间：

:duration="{enter:5000, leave: 10000}"

[20181120192500785.png]: /images/20220415/b2affaabefae4bd7bab3c9bac54fae46.png