vue 过度动画,vue过渡动画 translate
在插入、更新或移除DOM时，Vue提供了多种应用程序过渡效果。Vue提供了一个内置的过渡包组件transition，用来封装组件实现过渡效果。
目录
过渡钩子函数自定义过渡类名transition-group使用摘要先看一个例子。
代码如下所示
模板
div align= center style= margin-top:100px；
button @click=show=！“显示”测试/按钮
过渡
div v-if=show
p这是一段文字/p
/div
/过渡
/div
/模板
脚本
导出默认值{
名称：过渡测试，
data () {
返回{
显示：真实
}
}
}
/脚本
样式范围。v-enter-active，v-离开-活动{
过渡：全. 5s；
}。回车{
transform:translate y(50px)；
不透明度：0；
}。v-离开-活动{
transform:translate y(50px)；
不透明度： 5；
}
/风格
包装一个div组件，点击按钮实现动画效果。一般与v-if、v-show、动态组件和组件根节点一起使用。
transition钩子函数
Transition提供了六个钩子函数，供我们在不同时间编写相应的动画效果。以下是这六个钩子函数的执行机会。
1.v-enter:进入过渡开始状态。它在元素插入之前生效，并在元素插入之后的下一帧被移除。
2.v-enter-active:进入跃迁生效时的状态。这个类可以用来定义过程时间，延迟和曲线函数的过渡。
3.v-enter-to:输入转换的结束状态。下一帧在元素插入后生效(同时移除v-enter)，在转场/动画完成后移除。
4 . v-离开：离开过渡的开始。当偏离过渡被触发时，它立即生效，并且下一帧被移除。
5.v-leave-active:当转换生效时离开状态。这个类可以用来定义离开过渡的过程时间、延迟和曲线函数。
6.v-leave-to:离开转换的结束状态。触发离开转场后，下一帧生效(同时删除v-leave)，并在转场/动画完成后移除。
自定义过渡类名
页面中有很多地方需要过渡。如果使用vue提供的默认六个钩子函数，那么所有要过渡的地方的过渡效果都是一样的。如果我们需要在不同的场合定义不同的动画效果，我们需要定义属于每个过渡效果的自己的类名。解决方案：将name属性添加到transition标记中，并在name属性中写入您自己的类名前缀。比如，那么在使用类名的时候，是这样的：我的假期。我的-trans-enter-to。比如：
转换名称=我的转换模式=出-入
路由器-查看v-if=！$ route . meta . keepalive /router-view
/过渡
Style，my-trans是的前缀。我的-trans-enter-active "
风格。我的-trans-enter-active。我的-运输-休假-活动{
转场：全. 2s；
不透明度：1；
}。我的-trans-enter {
转场：全. 2s；
不透明度：0；
}。my-trans-leave-to {
转场：全. 2s；
不透明度：0；
}
/风格
transition-group使用
在转换中呈现列表时，必须用转换组元素包装它。点击列表中的内容，根据下面的动画将其删除，如下例所示。
模板
div class=main_css
过渡组名称=slide
li v-for=(item，I)in list :key= item . id @ click= del(I)
{{ item.id }} - {{ item.name }}
/李
/过渡-组
/div
/模板
脚本
导出默认值{
名称： transitionGroupTest ，
data () {
返回{
列表：[{
id: 1，
名称：“红烧鱼”
},
{
id: 2，
名称：“油炸土豆”
},
{
id: 3，
名称：“烤茄子”
}
]
}
},
方法：{
德尔(一){
this.list.splice(i，1)
}
}
}
/脚本
样式范围。main_css {
左边距：50px
边距-顶部：50px
}。滑动-输入-激活{
过渡：全. 5s线性；
}。滑动-保持-活动{
过渡：全. 1s线性；
}。滑动输入{
transform:translate x(-100%)；
不透明度：0；
}。向左滑动到{
transform:translate x(110%)；
不透明度：0；
}
/风格
小结
用over-animation，用transition标签来完成，同时提供6个hook函数。全局动画在app.vue中，转场包装在路由器视图组件中，比如：在transition标签中添加name属性，定义转换类名，实现局部改变。
以上是对vue转场和动画转场例子的详细说明。更多关于vue转场和动画转场的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。