vue-transition动画

港控/mmm° 2024-04-17 05:51 65阅读 0赞

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 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]  
**二、自定义过度类名**  
默认的.fade-enter变成.fade-in-enter;

默认的.fade-enter-active变成.fade-in-active;

默认的.fade-leave变成.fade-out-enter;

默认的.fade-leave-active变成.fade-out-active;

<transition 
        name="fade"
        enter-class="fade-in-enter"
        enter-active-class="fade-in-active"
        leave-class="fade-out-enter"
        leave-active-class="fade-out-active"
      >
        <p v-show="show">hello</p>
    </transition>

.fade-in-active, .fade-out-active{
        transition: all 0.5s ease 
    } 
    .fade-in-enter, .fade-out-active{
         opacity: 0 
    }

**三、transition相关函数**

methods:{
        beforeEnter(el){
            console.log('动画enter之前');
        },
        enter(el){
            console.log('动画enter进入');
        },
        afterEnter(el){
            console.log('动画进入之后');
            el.style.background="blue";
        },
        beforeLeave(el){
            console.log('动画leave之前');
        },
        leave(el){
            console.log('动画leave');
        },
        afterLeave(el){
            console.log('动画leave之后');
            el.style.background="red";
        }
    }

**四、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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/c0935097ee224ed2a073bbe35f51bdc6.png