Vue封装的过渡与动画

作用：在插入，更新或移除DOM元素时，在合适的时候给元素添加样式类名

动画效果

利用<transition>标签（只能控制一个元素）实现过渡，添加appear属性可以实现出现时就有动画效果

@keyframes定义动画名

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

        }
    }

animation调用该动画

<button @click="isShow=!isShow">切换</button>
<transition>
	<h1 v-show="isShow">Animation</h1>
</transition>
 
/*不指定name时用v-，指定name后将v换成name即可*/
.v-enter-active{
	animation: trans 1s;
}

.v-leave-active{
	animation: trans 1s reverse;
}

如果有多个动画，就需要给<transition>标签添加name属性和修改类名（将v换成指定name即可）

<button @click="isShow=!isShow">切换</button>
<transition name="hello">
	<h1 v-show="isShow">Animation</h1>
</transition>
 
/*将v换成指定name即可*/
.hello-enter-active{
	animation: trans 1s;
}

.hello-leave-active{
	animation: trans 1s reverse;
}

过渡效果

<button @click="isShow=!isShow">切换</button>
<transition name="hello" appear>
	<h1 v-show="isShow">Animation</h1>
</transition>
        
/* 进入的起点和离开的终点 */
.hello-enter,.hello-leave-to{
	transform: translateX(-100%);
}

/* 进来和离开的过程 */
.hello-enter-active,.hello-leave-active{
	transition: 0.5s linear;
}

/* 进入的终点和离开的起点 */
.hello-enter-to,.hello-leave{
	transform: translateX(0);
}

多个元素过渡

多个元素使用同一个过渡效果，使用<transition-group>实现，每个需要用该过渡效果的元素都需要有自己独一无二的key

<button @click="isShow=!isShow">切换</button>
<transition-group name="hello" appear>
	<h1 v-show="isShow" key="1">Animation</h1>
	<h1 v-show="!isShow" key="2">Animation</h1>
</transition-group>

集成第三方动画库

安装Animate.css

npm install animate.css --save

使用

引入：

import 'animate.css'

官网地址：animate.css官网（可能会进的比较慢，网址没问题）

需要给<transition>标签配置name属性为animate__animated animate__bounce，enter-active-class属性为在官网复制的进入动画名，leave-active-class属性为在官网复制的离开动画名

<button @click="isShow=!isShow">切换</button>
<transition 
	appear
	name="animate__animated animate__bounce" 
	enter-active-class="animate__swing"
	leave-active-class="animate__bounceOut"
>
	<h1 v-show="isShow">Animation</h1>
</transition>