vue动画—过度类方式实现（transition）

注意：

transition承载的动画标签，添加一个类名，即可在动画的时间点或者时间段上，将v-前缀改为自己的类名，这样可以避免动画冲突

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>

    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        /*一场动画四个时间点，这两个分别表示将要开始和即将结束*/
        
        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
            /*三个属性分别代表 所选属性 执行时间 效果*/
        }
        .private-enter,
        .private-leave-to{
            opacity: 0;
        }
        /*一场动画四个时间点，这两个分别表示将要开始和即将结束*/
        
        .private-enter-active,
        .private-leave-active{
            transition: all 1s ease;
            /*三个属性分别代表 所选属性 执行时间 效果*/
        }
    </style>
</head>
<body>
      <div id="app">
          <div>
              <input type="button" value="显示/隐藏" @click="flag=!flag">
              <transition>
                  <h3 v-if="flag">陈小帅是真的帅！</h3>
                  <!--通过一个标识符，然后可以不停将转换true/false，达到隐藏显示的目的-->
              </transition>
              <!--将需要转换的动画用transition承载，在头部实现样式-->
          </div>
          
          <div>
              <input type="button" value="显示/隐藏" @click="flag2=!flag2">
              <transition>
                  <h3 v-if="flag2" class="private">陈小帅是真的帅！</h3>
              </transition>
          </div>
          <!--transition承载的动画标签，添加一个类名，即可在动画的时间点或者时间段上，将v-前缀改为自己的类名，这样可以避免动画冲突-->
          
      </div>

      <script>
          var vm = new Vue({
              el:"#app",
              data:{
                  flag:false,
                  flag2:false
              }
          })
      </script>
</body>
</html>

效果：

vue动画—过度类方式实现（transition）

注意：

猜你喜欢