vue中使用transition加入过度动画(载入enter-active离开leave-active)

作者：很楠不爱3 | 2024-04-05 05:47:32

踩

enter-active

使用<transition></transition>给vue中dom原始加入css过渡动画

enter-active和leave-active

enter-active是控制载入时的样式名的后缀
leave-active 是控制消失时的样式名的后缀

    <style>         
        .animation-enter-active{
            animation: aaa 1.5s;
        } /* 动画样式 animation 为名字(自己随便定义), 后面的enter-active 和 leave-active 分别代表进场和出场 Vue 会自动识别 */
        .animation-leave-active{
            animation: aaa 1.5s reverse;
        }
        @keyframes aaa{
            0% {
                opacity: 0;
                transform: translateX(100%);
            }
            100% {
                opacity: 1;
                transform: translateX(0%);
            }
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

单个元素过渡

<transition></transition>是vue自带的
通过属性name=样式名 来给其内的HTML标签添加过渡动画,vue会自动的根据dom元素改变从而添加载入动画和消失动画
appear 加上后会在第一次加载dom元素时就加载过渡动画
代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>         
        .animation-enter-active{
            animation: aaa 1.5s;
        } /* 动画样式 animation 为名字(自己随便定义), 后面的enter-active 和 leave-active 分别代表进场和出场 Vue 会自动识别 */
        .animation-leave-active{
            animation: aaa 1.5s reverse;
        }
        @keyframes aaa{
            0% {
                opacity: 0;
                transform: translateX(100%);
            }
            100% {
                opacity: 1;
                transform: translateX(0%);
            }
        }
    </style>
</head>
<body>
    <div id="box">
      <button @click="isShow = !isShow">click</button>
      <transition name="animation" appear>  <!-- transition 为vue中的dom添加样式   appear 为初始的时候就加入动画, 就是刷新页面
       transition 里面只能存在一个同级的根标签, -->
        <div v-show="isShow">000000000000000000000000000</div>
      </transition>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isShow:true
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

多元素的过滤

transition 里面只能存在一个同级的根标签,

  <transition name="animation" appear>  
     <div v-if="isShow">000000000000000000000000000</div>
     <div v-else>111111111111111111111111</div> 
  </transition>  
1
2
3
4

如果这样写, 根据vue的diff算法, vue 只会改变标签内的的值, 而不会重新渲染出一个dom
只有在改变dom的时候, 动画才会加载,如果想要这样写要加一个唯一 key, 这个key只要不同就可
代码示例:

<body>
    <div id="box">
      <button @click="isShow = !isShow">click</button>
      <transition name="animation" appear>  
        <div v-if="isShow" key="000">000000000000000000000000000</div>
        <div v-else key="111">111111111111111111111111</div> 
      </transition>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isShow:true
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

列表过渡 transition-group

<transition-group>不同于transition, 它会以一个真实的标签呈现: 默认是为一个是<span>标签, 可以通过 tag 更换其他标签
代码演示

<body>
    <div id="box">
      <input type="text" v-model="name" >
      <button @click="handleAdd">add</button>
      <!-- <ul> -->  
          <!-- <transition-group>不同于transition, 它会以一个真实的标签呈现: 默认是为一个是<span>标签, 可以通过 tag 更换其他标签--->
          <transition-group tag="ul" name="animation">
            <li v-for=" item in list" :key="item"> {{ item }} </li>
          </transition-group>
      <!-- </ul> -->
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"",
                list:[]
            },
            methods:{
                handleAdd(){
                    console.log("记得加入不同的",this.name)
                    console.log(this.list)
                    this.list.push(this.name)
                    this.name=''
                }
            }
        })
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】