Vue 动画效果 及 Animate的基本使用

运用原来的css代码编写动画，但是动画的类名在Vue是有规定，在进入的时候使用v-enter-active，离开的时候使用v-leave-active

    @keyframes myaction {
        from{
            transform:translateX(-100%);
        }
        to{
            transform:translateX(0)
        }
    }

.v-enter-active {
    animation: myaction 0.5s linear;
}

.v-leave-active {
    animation: myaction 0.5s linear reverse;
}

但是在一个网页中，如果需要多个不同的动画，那么动画类名就会出现冲突，所以我们是可以修改动画类名的，将需要添加动画的标签嵌套在<transition></transition>中，并为其添加name属性

<transition name="sss">
	<School v-show="isShow"></School>
</transition>

.sss-enter-active {
    .....
}

.sss-leave-active {
    ....
}

单元素/组件过渡

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

• 条件渲染（v-if）
• 条件展示（v-show）
• 动态组件
• 组件根节点

当我们插入或者删除包含在transition组件中的元素，Vue将会做以下处理：

1. 自动嗅探目标元素是否应用了CSS过渡或者动画，如果是，在恰当的时机添加/删除CSS类名
2. 如果过渡组件提供了Javascript钩子函数，这钩子函数将在恰当的时机被调用
3. 如果没有找到JavaScript够自并且没有检测到CSS过渡/动画，DOM操作（插入/删除）在下一帧中立即执行（注意：此指浏览器逐帧动画机制，和Vue的nextTick概念不同）

——源于Vue官网

过渡的类名

在进入/离开的过渡中，会有6个class切换

1. v-enter:定义进入过渡的开始状态（比如：开始的位置等）。在元素被插入之前生效，在元素被插入之后的下一帧移除
2. v-enter.active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以用来定义过渡的过程时间，延迟和曲线函数
3. v-enter-to:定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡/动画完成之后移除

离开的过渡也有三个class，v-leave,v-leave-active,v-leave-to,这三个的使用方法和进入的过渡是相同的

【例子说明】

      <button @click="isShow=!isShow">显示/隐藏</button>
      <transition name="title">
            <h1 v-show="isShow">你好啊</h1>
      </transition>

    /* 显示时开始的位置， 离开时结束的位置 */
    .title-enter, .title-leave-to{
        transform:translateX(-100%)
    }
    /* 显示时结束的位置， 离开时开始的位置 */
    .tltle-enter-to, .tltle-leave{
        transform:translateX(0%);
    }
    /* 显示和离开的动画过程 */
    .title-enter-active, .title-leave-active {
        transition: 5s linear;
    }

多个元素过渡

      <transition name="title">
            <h1 v-show="isShow">你好啊</h1>
            <h1 v-show="isShow">欢迎光临</h1>
      </transition>

这样子出现的效果是：第一个h1能正常响应，但是第二个h1却不能响应，并且报错<transition> can only be used on a single element. Use <transition-group> for lists

主要的意思是<transition>只能被一个元素使用，如果有多个元素，请使用<transition-group>

错误思想：

我们从上面的学习中会认为，嵌套在同一个transition中，那么在transition的所有元素都可以使用同一个动画

      <transition-group name="title">
            <h1 v-show="isShow">你好啊</h1>
            <h1 v-show="isShow">欢迎光临</h1>
      </transition-group>

但是我们使用了<transition-group>，两个元素都不能显示，并且报错<transition-group> children must be keyed: <h1>

报错的主要意思：<transition-group>内部的子元素必须绑定一个key值

      <transition-group name="title">
            <h1 v-show="isShow" key="1">你好啊</h1>
            <h1 v-show="isShow" key="2">欢迎光临</h1>
      </transition-group>

但是我们可以把两个h1放在一个div中，那么一个transition就管理一个div元素，那么就可以不用transition-group

      <transition name="title">
          <div v-show="isShow">
            <h1 >你好啊</h1>
            <h1 >欢迎光临</h1>
          </div>
      </transition>

<transition-group>主要用于互斥元素的动画效果

      <transition-group name="title">
            <h1 v-show="!isShow" key="1">你好啊</h1>
            <h1 v-show="isShow" key="2">欢迎光临</h1>
      </transition-group>

集成第三方动画

第三方动画网址：Animate

安装

npm install animate.css

引入

在需要使用的组件中引入

import "animate.css"

使用

将类名(animate__animated)添加到元素中,以及任何动画名称(不要忘记animate__前缀)

普通元素

<h1 class="animate__animated animate__bounce">An animated element</h1>

transition/transition-group

      <transition-group 
        appear                
		name="animate__animated animate__bounce"
		enter-active-class="animate__swing"
		leave-active-class="animate__bounceOutUp"
		>
            <h1 v-show="!isShow" key="1">你好啊</h1>
            <h1 v-show="isShow" key="2">欢迎光临</h1>
      </transition-group>