这篇文章将为大家详细讲解有关如何使用Vue实现动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
官方的demo点击显示与消失
计算
安全
数据库
网络和加速
企业服务
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: "#demo",
data: {
show: true,
},
});
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>transition 使用<transition name="fade">
(元素，属性、路由....)
</transition>class定义
.fade-enter{ }进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
.fade-enter-active{ }进入过渡的结束状态，元素被插入时就生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
.fade-leave{ }离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
.fade-leave-active{ }离开过渡的结束状态，元素被删除时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
默认的 .fade-enter变成 .fade-in-enter
默认的 .fade-enter-active变成 .fade-in-active
默认的 .fade-leave变成 .fade-out-enter
默认的 .fade-leave-active变成 .fade-out-active
<transition
name="fade"
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active"
>
<p v-show="show">hello</p>
</transition>.fade-in-active,
.fade-out-active {
transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
opacity: 0;
}transition相关函数<transition
name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="show"></div>
</transition>
<script>
export default {
methods: {
beforeEnter(el) {
console.log("动画enter之前");
},
enter(el) {
console.log("动画enter进入");
},
afterEnter(el) {
console.log("动画进入之后");
el.style.background = "blue";
},
beforeLeave(el) {
console.log("动画leave之前");
},
leave(el) {
console.log("动画leave");
},
afterLeave(el) {
console.log("动画leave之后");
el.style.background = "red";
},
},
};
</script>transition结合animate.css使用以下代码演示元素以 X 轴为基线，翻转进场出场的动画
Animate.css库点这里地址：https://animate.style/
<!-- 翻转进场出场-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
<div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition
enter-active-class="animated flipInX"
leave-active-class="animated flipOutX"
>
<div v-show="show"></div>
</transition><transition-group enter-active-class="flipInX" leave-active-class="flipOutX">
<div v-show="show" :key="x" v-for="x in 5"></div>
</transition-group>需要注意的是在group的时候，key的取值直接影响动画的过渡。
关于“如何使用Vue实现动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
