image.png
元素进入的样式：

  1. v-enter：进入的起点
  2. v-enter-active：进入过程中
  3. v-enter-to：进入的终点

元素离开的样式：

  1. v-leave：离开的起点
  2. v-leave-active：离开过程中
  3. v-leave-to：离开的终点

注意事项：

  1. transition 只能放置一个元素 多个用transition-group

  2. v-enter-active 和 v-leave-active可以放动画，就是一整个过程，没动画情况下才要写满进入到离开的样式。

    定义动画的类

    image.png

    appear 初始渲染的过渡

    image.png

    name修改前缀

    css也得改为对应name
    image.png

    css不匹配类名

    image.png

    钩子函数&小球半程动画

    image.png
    image.png
    注意: 如果想一开始进来就执行动画, 那done函数必须延迟 - setTimeout

    第三方类库

    自定义类名

    image.png

    自定义类

    1. <style>
    2. .a {
    3.  opacity: 0;
    4. }
    6. .b {
    7.  margin-left: 500px;
    8.  opacity: 1;
    9. }
    11. .c {
    12.  transition: all 3s;
    13. }
    14. </style>
    15. <body>
    16.  <div id="app">
    17.      <button @click="toggle">点我</button>
    18.    //enter-class 入场前
    19.    //enter-to-class 入场后
    20.    //enter-active-class 入场过程中
    21.      <transition appear enter-class="a" enter-to-class="b" enter-active-class="c">
    22.          <div class="box" v-show="isShow"></div>
    23.      </transition>
    24.  </div>
    25. </body>

    使用Animate

    code.png

    使用Velocity第三方类库

    image.png

    transition-group 列表动画

    注意点

  • <transition-group>默认渲染为span标签，通过tag属性修改

  • 一般出现动画混乱 都是key重复的问题

    <style>      
.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-to,
.v-leave {
  opacity: 1;
}

.v-enter-active,
.v-leave-active {
  transition: all 2s;
}
</style>
<body>
  <div id="app">
    //多个元素用transition-group
    //tag将transition-group渲染为对应的ul
    //style设置了动画效果
    //注意添加key
      <transition-group appear tag="ul">
          <li v-for="(person,index) in persons" :key="person.id">
              <input type="checkbox" @click="del(index)">
              <span> {{person.name}}</span>
          </li>
      </transition-group>
  </div>
</body>
<script>
  let app = new Vue({
      el: "#app",
      data: {
          isShow: true,
          persons: [{
              name: "amamda",
              id: 1
          }, {
              name: "jim",
              id: 2
          }, {
              name: "ivy",
              id: 3
          }]
      },
      methods: {
          del(index) {
              this.persons.splice(index, 1)
          }
      }
  })
</script>