教你怎么使用Vue实现动画效果（附代码）

PHP中文网 • 2025年3月13日 05:33:48 • 编程技术 • 阅读 2

之前的文章《手把手教你使用CSS3制作一个简单页面的布局（代码详解）》中，给大家介绍了怎么使用CSS3制作一个简单页面的布局。下面本篇文章给大家介绍怎么使用Vue实现动画效果，有需要的朋友可以参考一下，希望对你们有帮助。

官网 API 地址:https://cn.vuejs.org/v2/guide/transitions.html

官方的demo点击显示与消失

        hello
  
  new Vue({    el: "#demo",    data: {      show: true,    },  });  .fade-enter-active,  .fade-leave-active {    transition: opacity 0.5s;  }  .fade-enter,  .fade-leave-active {    opacity: 0;  }

登录后复制

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

hello

登录后复制

.fade-in-active,.fade-out-active {  transition: all 0.5s ease;}.fade-in-enter,.fade-out-active {  opacity: 0;}

登录后复制

transition相关函数

  
  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";      },    },  };

登录后复制