Vue中的动画

1.过渡类名实现动画

四个时间点：v-enter，v-enter-to，v-leave,v-leave-to
入场时元素从v-enter变化到v-enter-to的状态，退场时元素从v-leave变化到v-leave-to
作用：使页面中的元素出现和消失不会很突兀，加一个过渡效果
使用：

1. 用transition标签把需要被动画控制的元素包裹起来
   transition标签自带了v-enter,v-leave-to,v-enter-active,v-leave-active属性，
   只要有这些属性就可以触发过渡动画

标签可以修改v-前缀 修改transition标签
元素的每次出现和消失都会调用过渡类动画。

1. 增加一个新属性name
   <transition name="自定义的符串"> 修改样式
2. 样式属性为自定义的字符串-enter
   自定义的字符串-enter,.自定义的字符串-leave-to { opacity:0 transform://位移 translateX(); }

<transition>
<p>aa</p>
</transition>

2. 定义样式
   入场动画样式：.v-enter,.v-leave-to
   退场动画样式：v-enter-active,.v-leave-active
   移动动画样式：v-move在其他元素被删除，需要移动位置时使用

<style>
.v-enter,.v-leave-to{
opacity:0
transform://位移
translateX();
}
v-enter-active,.v-leave-active{
//opacity:1
transition:all 时间 过渡状态(ease)
}
v-move{
transition:all 时间 过渡状态(ease)
//需要在新增
//v-leave-active {position: absolute}
//才会起效
}
</style>

2.使用第三方类使用动画

可以使用animate.css来实现更加炫酷的动画

1. 安装
   在vscode中使用webpack导入animate.css
   安装animate.css

npm install animate.css --save-dev

还需要安装加载器(css-loader,style-loader)
导入animate.css

import 'animate.css'

其他的方式直接导包即可

2. 使用

<transition 
enter-active-class="animated 动画类名" 
leave-active-class="animated 动画类名" 
duration="{enter:时间,leave:时间}">
</transition>

3.动画的钩子函数

作用：可以将动画切段，只有出场或只有入场
如果只写一组入场样式，出场还是会按照默认样式

1. transition中的属性

<transition
//入场
v-on:befor-enter=""
//设置入场前的位置和样式
v-on:enter=""
//设置入场的位置和样式
v-on:after-enter=""
//设置入场后的位置和样式
v-on:enter-canelled=""
//出场
v-on:before-leave=""
v-on:leave=""
v-on:after-leave=""
v-on:leave-cancelled=""
>

Vue的钩子函数实现半场动画的分析
情景：利用flag=!flag来实现半场动画的切换
代码：
.js文件

var vm=new Vue({
    el:'#app',
    data:{
        flag:false
    },
    methods:{
        before(el){
            el.style.transform="translate(0,0)"
        },
        enter(el,done){
            el.offsetWidth
            el.style.transform="translate(100px,100px)"
            el.style.transition="all 2s ease"
            done()
        },
        after(el){
            this.flag=!this.flag
        }
    }
})

.html文件

<div id="app">
       <input type="button" value="tagger" @click="flag=!flag">
      <transition @before-enter="before" @enter="enter" @after-		enter="after">
            <p v-show="flag" >dadada</p>
      </transition>

分析：
当只定义了上半场动画时，flag=true，立刻执行上半场动画
若使用opacity=0来隐藏元素，因为没有定义后半场动画，仍会执行后半场，显得不流畅
若在afterEnter()中直接将flag改为flase，则会直接跳过后半场动画

4.transition标签属性的使用

作用：实现半场动画（没有出场）

1. 增加属性

<transition

@before-enter="before"

//作用：在动画开始之前，设置起始位置或样式

//时机：动画入场之前，动画尚未开始

@enter="enter"

//作用：设置在动画完成之后元素所在的位置和样式

//时机：动画已经完成

@after-enter="after"

//作用：设置在动画完成之后的位置和样式的改变

//时机：动画已经完成

>

</transition>

2. 增加methods方法

var vm=new Vue({

methods:{

before(el){

el.style.transform="translate(0,0)"

//设置起始位置

el.style=""

//其他样式

},

enter(el，done){

el.offsetWidth

//写了这句话才能出来动画效果

el.style.transform="translate(100px,100px)"

el.style.transition="all 时间 ease"

//设置动画时间方式

done()

//作用：使动画完成后立即执行after-enter后的操作

//done就是after-enter函数

},

after(el){

el.style=""

//设置样式

}

}

})

5.transition-group标签元素实现列表动画

1. 作用

使列表新增数据时，有一个过渡动画
通过v-for循环出来的元素不能使用

2. 使用

用标签包裹

<transition-group>
//必须加key
<p v-for="i in aa" :key="i.id"> {{i}}</p>
</transition-group>

定义样式

<style>
.v-enter,.v-leave-to{
opacity:0
transform://位移
translateX();
}
v-enter-active,.v-leave-active{
//opacity:1
transition:all 时间 过渡状态(ease)
}
</style>

3. appear和tag属性

   appear
   作用：使列表在整个页面加载时，会有一个入场动画
   使用：

<transition-group appear>
</transition-group>

**tag**

作用：防止transition-group 标签默认渲染为span标签，修改为自己想添加的标签
使用：

<transition-group tag="ul">
//此时页面中渲染出来的就是<ul></ul>
</transition-group>