Vue中的过渡动画

太阳与星辰

已于 2025-03-24 21:07:27 修改

阅读量489

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端 Vue2及其生态文章标签：前端 Vue2 过渡动画

于 2025-02-26 15:18:34 首次发布

本文链接：https://blog.csdn.net/fageaaa/article/details/145878501

前端同时被 2 个专栏收录

264 篇文章

订阅专栏

Vue2及其生态

29 篇文章

订阅专栏

Vue中的过渡动画

1.概述
2.基本用法
3.总结
4.使用animate动画库
5.在过渡钩子函数中使用JavaScript直接操作 DOM

1.概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

2.基本用法

2.1 准备好样式

下面是css样式代码:
在这里插入图片描述

(1)元素进入

v-enter 进入起点
v-enter-active 进入过程中
v-enter-to 进入的终点

(2)元素离开

v-leave 离开的起点
v-leave-active 离开的过程
v-leave-to离开的终点

2.2 使用过渡标签

使用transaction包裹过渡的元素,并且配置name属性：
在这里插入图片描述
此时需要将上面样式的v改为具体的name:

2.3 其它注意点

要让页面一开始就有动画,需给过滤元素添加appear属性:

<transition appear>
  <!-- ... -->
</transition>

若有多个元素需要过渡，需要<transition-group>,并且每个元素都要指定key值：

  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>

3.总结

3.1 单组过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .div {
            width: 100px;
            height: 100px;
            background: red;
            
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(500px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show">显示</button>
    <button @click="hidden">隐藏</button>
    <transition>
        <div class="div" v-if="flag"></div>
    </transition>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {
            show() {
                this.flag = true;
            },
            hidden() {
                this.flag = false;
            }
        },
    })
</script>
</body>
</html>

3.2 多组过渡

取不同name即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <style>
    .div{width: 100px; height: 100px;background: red;}
    .v-enter,
    .v-leave-to{
      opacity: 0;
      transform: translateX(50px);
    }
    .v-enter-active,
    .v-leave-active{
      transition: all 1s ease;
    }
    .test-enter,
    .test-leave-to{
      opacity: 0;
      transform: translateY(100px);
    }

    .test-enter-active,
    .test-leave-active{
      transition: all 1s ease;
    }
  </style>
</head>
<body>
<div id="app">
  <button @click="btn">点击</button>
  <transition>
    <div class="div" v-if="flag"></div>
  </transition>
  <hr>
  <button @click="btn1">点击1</button>
  <transition name="test" mode="">
    <h1 v-if="flag1" >123</h1>
  </transition>
</div>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      flag:false,
      flag1:false
    },
    methods: {
      btn(){
        this.flag = !this.flag;
      },
      btn1(){
        this.flag1 = !this.flag1;
      }
    },
  })
</script>
</body>
</html>

3.3 列表过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .div {
            width: 100px;
            height: 100px;
            background: red;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(100px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <!--
        在transition-group内部不需要再加上ul,在tag中添加
        属性appear可以添加入场属性动画
     -->
    <transition-group tag="ul" appear>
        <li v-for="(item, i) in list" :key="item.id">
            {{item.id}}=={{item.name}}=={{item.age}}
        </li>
    </transition-group>
    <input type="text" placeholder="id" v-model="id"/>
    <input type="text" placeholder="name" v-model="name"/>
    <input type="text" placeholder="age" v-model="age"/>
    <button @click="btn">新增</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            age:'',
            list:[
                {id:1,name:'小米',age:18},
                {id:2,name:'小明',age:28},
                {id:3,name:'小宜',age:38}
            ]
        },
        methods:{
            btn(){
                var newobj = {id:this.id,name:this.name,age:this.age}
                this.list.push(newobj);
            }
        },
    })
</script>
</body>
</html>

4.使用animate动画库

也可以用第三方JavaScript 动画库，如 Velocity.js。具体用法查官网即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<div id="app">
    <button @click="btn">点击</button>
    //animate__animated、animate__bounce都是固定的名字
    <h1 v-if="flag" class="animate__animated animate__bounce">An animated element</h1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false,
        },
        methods: {
            btn() {
                this.flag = !this.flag;
            },
        },
    })
</script>
</body>
</html>

5.在过渡钩子函数中使用JavaScript直接操作 DOM

Vue的过渡系统提供了几个钩子函数，可以在元素进入或离开其DOM时执行特定的代码。这些钩子包括：before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave 和 leave-cancelled。
下面看一个例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @leave="leave"
        @after-leave="afterLeave"
      >
        <div v-if="show">Hello World</div>
      </transition>
      <button @click="show = !show">Toggle</button>
    </div>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          show: false,
        },
        methods: {
          beforeEnter(el) {
            // 元素进入前的操作，例如设置初始状态
            el.style.opacity = 0;
          },
          enter(el, done) {
            // 元素进入动画的实现，使用定时器或动画库如Velocity.js等
            setTimeout(() => {
              el.style.transition = "opacity 0.5s";
              el.style.opacity = 1;
              done(); // 调用done表示动画结束
            }, 1000); // 稍作延迟以避免立即调用done导致动画未执行的问题
          },
          afterEnter(el) {
            // 元素进入后的操作，例如清理样式或触发事件等
            console.log("Entered");
          },
          leave(el, done) {
            // 元素离开动画的实现，使用定时器或动画库如Velocity.js等
            el.style.transition = "opacity 0.5s";
            el.style.opacity = 0;
            setTimeout(() => {
              done(); // 动画结束时调用done
            }, 500); // 与CSS过渡时间匹配
          },
          afterLeave(el) {
            // 元素离开后的操作，例如删除元素等
            console.log("Left");
          },
        },
      });
    </script>
  </body>
</html>