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"自定义

上一篇:“21天好习惯”第一期-4


下一篇:过渡动画transition - Css动画基础