Vue之transition动画

向右看齐 2022-04-18 04:48 239阅读 0赞

demo:

<template>
      <div id="root">
        <div>
          <router-link to="/home">首页 \</router-link>
          <router-link to="/about">关于</router-link>
        </div>
        <transition name="fade">
          <router-view ></router-view>
        </transition>
      </div>
    </template>
    
    <style lang="less">
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
    </style>

transition使用

class定义：

1.  .fade-enter\{ \} 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
2.  .fade-enter-active\{ \} 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。.fade-enter-active\{ \} 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3.  .fade-leave\{ \} 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；.fade-leave\{ \} 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
4.  .fade-leave-active\{ \} 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。.fade-leave-active\{ \} 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

自定义过度类名

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

<template>
      <div id="root">
        <div>
          <router-link to="/home">首页 \</router-link>
          <router-link to="/about">关于</router-link>
        </div>
        <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">
        <router-view ></router-view>
        </transition>
      </div>
    </template>
    
    <style lang="less">
    .fade-in-active, .fade-out-active{
      transition: opacity .5s
    } 
    .fade-in-enter, .fade-out-active{
      opacity: 0 
    }
    </style>

transition相关函数

methods:{
        beforeEnter(){
            console.log('动画enter之前');
        },
        enter(){
            console.log('动画enter进入');
        },
        afterEnter(){
            console.log('动画进入之后');
        },
        beforeLeave(){
            console.log('动画leave之前');
        },
        leave(){
            console.log('动画leave');
        },
        afterLeave(){
            console.log('动画leave之后');
        }
      }

![在这里插入图片描述][2018110817051192.png]

过度效果mode属性指定：

transition-group过度多个容器，需要设置key值

<transition-group name="fade" mode="in-out">
          <router-view key="aa"></router-view>
          <div key="bb">Hello</div>
      </transition-group>

[2018110817051192.png]: /images/20220418/8efde67f7e4d4ff58eb5a5bb2bcb3bbc.png