vuejs的动画简单入门讲解

今天在这里为大家讲解下vue中使用transition组件来进行动画的执行，vue的官方文档中说明了动画一共有六个状态，分别是
1.v-enter，可以理解为动画进入之前元素的起状态，比如位置等等
2.v-enter-active 简单理解为进入动画执行的效果
3.v-enter-to 进入动画结束之后
4.v-leave 和上面进入类似，离开前
5.v-leave-active 离开的动画效果
6.v-leave-to 离开之后的状态
可能大家对元素的进入离开有所困惑？元素一开始是执行进入动画还是离开动画呢？我们可以简单理解为根据元素的显示与隐藏或者插入删除来决定的，
比如说元素一开始就是隐藏的，那么我们点击按钮让它显示，那么它就执行的就是进入动画，如上面所说v-enter类就是定义动画进入之前的状态，
例子中就是translateY(100px)，那么它就会从下到上进入，耗时0.8s。如果我们把show一开始就改为true，即元素一开始就是显示的，点击就会隐藏，
那么它就会执行离开动画，从上到下移动，如上面所说v-leave-to类就是定义动画离开之后的状态，例子中就是translateY(100px)，那么它就会从上到下离开，
耗时2s，再次点击就是执行进入动画。

     <style>
      .v-enter-active { 
        transition: all .8s ease;
      }
      .v-leave-active {
        transition: all 2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .v-enter, .v-leave-to {  /*定义元素在进入之前和离开之后的状态，一起写就表示进入之前和离开之后的状态是一样的*/
        transform: translateY(100px);
      }
    </style>
</head>
<body>
  <div id="app">
    <button @click="show = !show">开始</button>

    <transition>
      <p v-if="show">hello</p>
    </transition>

  </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          show: false
        }
      })
    </script>
</body>
</html>

来源：CSDN

作者：目标学完css

链接：https://blog.csdn.net/dajuna/article/details/103831336

标签

动画

动漫

vue