vue核心基础-过渡动画

第一种方法：引入类名

.v-enter{
      opacity: 0;
    }
    .v-enter-to{
      opacity: 1;
    }
    .v-leave{
      opacity: 1;
    }
    .v-leave-to{
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: all 1s;
    }

第二种方法：通过钩子函数

在transition标签里面添加

v-bind:before-enter="beforeEnter"

v-bind:enter="enter"

v-bind:after-enter="afterEnter"

在vue得methods中创建过渡动画

注意点

• 这种方法他还是会默认寻找类名，所以需要添加v-bind:css="false"
• 通过钩子函数这种方法，再enter时候必须要添加el.offsetHeight或者el.offsetWidth，不然没有动画效果
• 如果想要已进入页面就执行动画，那么需要添加done回调函数，不然不会往下执行，并且需要延迟执行done
• 可以修改name属性来修改前缀v-

第三种方法：利用Velocity

第一步引用velocity（)

第二步创建钩子函数，找到enter，在enter里面构建动画。例：Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000); done();

第四种方法通过自定义类名，引入animate.css

在transition标签中利用：

• enter-class=""
• enter-active-class=""
• enter-to-class=""
• leave-class=""
• leave-active-class=""
• leave-to-class=""
  
  后面的函数名可自定义，也可以引用animate.css

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .app{
      width: 200px;
      height: 200px;
      background: red;
    }
  </style>
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="demo">
  <button @click="isShow">toggle</button>
  <transition appear
              enter-class=""
              enter-active-class="animated bounceInRight"
              enter-to-class=""
  >
    <div class="app" v-show="show"></div>
  </transition>
</div>

<script>
  let vue = new Vue({
    el: "#demo",
    data: {
      show: true,
    },
    methods: {
      isShow(){
        this.show = !this.show;
      }
    }
  })
</script>

注意点

动态渲染界面时，要给动态更新的元素添加过度动画，那么不能使用transition，而要使用transition-group标签

transition-group标签会在动态渲染界面时，将所有元素放在span中。再标签中添加tag="ul"自定义