vue transition动画

灰太狼 2021-12-18 07:05 308阅读 0赞

引用： https://www.cnblogs.com/ccyinghua/p/7872694.html  
https://blog.csdn.net/wxw20147854/article/details/82835748

官网API: [https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]

demo点击显示与消失

<div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    </script>
    <style>
    .fade-enter-active, .fade-leave-active {
         
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
         
      opacity: 0
    }
    </style>

#### 一、transition使用 ####

class定义：

.fade-enter\{ \} 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)

.fade-enter-active\{ \} 进入过渡的结束状态，元素被插入时就生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

.fade-leave\{ \} 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

.fade-leave-active\{ \} 离开过渡的结束状态，元素被删除时生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

![1044730-20190403103813995-1111472726.png][]

#### ![1044730-20190409162615675-1821992707.png][] ####

#### 四、transition结合animate.css使用。 ####

#### 五、多个元素运动 ####

<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
          <p v-show="show" :key=""></p>
          <p v-show="show" :key=""></p>
    </transition-group>

转载于:https://www.cnblogs.com/llllpzyy/p/10647326.html

[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html
[1044730-20190403103813995-1111472726.png]: /images/20211218/1184872c0ea049ef9e5d8630134adc2a.png
[1044730-20190409162615675-1821992707.png]: /images/20211218/c02e10b492f043ae9807800e28a5d1e9.png