vue - 过度与动画
使用transition标签
在插入、更新或移出DOM元素时,在合适的时候给元素添加样式类名
元素进入的样式:
- v-enter:进入起点样式
- v-enter-active:进入过程中
- v-enter-to:进入的终点
元素离开的样式
- v-leave:离开的起点
- v-leave-avtive:离开过程中
- v-leave-to:离开的终点
使用动画写效果
在transition
标签加入appear
属性可以直接加载动画,给transition
标签创建name属性时样式class名就要变成name值-enter-active
<transition appear name="hello"></transition>
<style>
/* 进入时激活动画 */
.hello-enter-active {
animation: donghua 0.5s linear;
}
</style>
<transition>
<h1 v-show="isShow">你好</h1>
</transition>
<style>
/* 进入时激活动画 */
.v-enter-active {
animation: donghua 0.5s linear;
}
/* 离开动画 */
.v-leave-active {
animation: donghua 0.5s linear reverse;
}
@keyframes donghua {
from {
transform: translateX(-100%px);
}
to {
transform: translateX(0px);
}
}
</style>
使用过度写效果
<transition name="hello" appear>
<h1 v-show="isShow">你好</h1>
</transition>
<style>
h1{
background-color: orange;
/* 可以写动画的标签里 */
transition: 0.5s linear;
}
.hello-enter-active,.hello-leave-active{
/* 也可以写在这里面 */
transition: 0.5s linear;
}
/* 进入起点、离开的终点 */
.hello-enter,.hello-leave-to{
transform: translateX(-100%px);
}
/* 进入终点、离开的起点 */
.hello-enter-to,.hello-leave{
transform: translateX(0px);
}
</style>
在transition
标签里只能使用一个元素,想使用多个元素可以使用transition-group
,在使用多个元素动画时需要给动画标签添加key值
<transition name="hello" appear>
<h1 v-show="isShow">你好</h1>
<h1 v-show="!isShow">你好</h1>
</transition>
推荐动画库
下载库npm i -S animate.css
<transition
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="isShow">你好</h1>
<h1 v-show="!isShow">你好</h1>
</transition>
<script>
import 'animate.css'
</script>
-
目录导航
公告
昵称:默永
园龄:2年333天
注册时间:2021-11-15
当前在第:1页
总共:1条
搜索
精品文章 48小时阅读排行