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

使用<transition></transition>给vue中dom原始加入css过渡动画enter-active和leave-activeenter-active是控制载入时的样式名的后缀leave-active 是控制消失时的样式名的后缀<style>.animation-enter-active{animation: aaa 1.5s;} /* 动画样式

蓝小白1024

4540人浏览 · 2021-01-14 14:19:10

蓝小白1024 · 2021-01-14 14:19:10 发布

使用<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>

单个元素过渡

<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>

多元素的过滤

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

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

如果这样写, 根据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>

列表过渡 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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^