Vue学习笔记之动画

CSS过渡与动画

• 过渡
  • a.在CSS过渡和动画中自动应用class：
    • v-enter或enter-class：进入开始
    • v-enter-active或enter-active-class：执行过程中
    • v-enter-to或enter-to-class：结束动画
    • v-leave或leave-class：离开开始
    • v-leave-active或leave-active-class：离开过程
    • v-leave-to或leave-to-class：离开结束
    • v-move或move-class:不仅可以进入和离开动画，还可以改变定位
    • appear或appear-class：初始渲染的过渡
    • appear-to或appear-to-class：初始渲染结束
    • appear-active或appear-active-class：初始渲染过程

  <div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="userName">//transition便签必须要有
     <p v-if="show">hello</p>
  </transition>
  </div>
  
  new Vue({
  el: '#example-1',
  data: {
  show: true
  }
  })
  /* 可以设置不同的进入和离开动画 */
  * 设置持续时间和动画函数 */
  .userName-enter-active {
      transition: all .3s ease;
  }
  .userName-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .userName-enter, .userName-leave-to
  /* .userName-leave-active for below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
  }
  

  • b.使用第三方动画库//如Animate.css

  <div id="example-3">
     <button @click="show = !show">
         Toggle render
  </button>
  <transition
     name="custom-classes-transition"
     enter-active-class="animated tada"//使用第三方动画库
     leave-active-class="animated bounceOutRight"//使用第三方动画库
  >
                                                                                                                                                                                                                                                                                                                                                                         <p v-if="show">hello</p>
  </div>
         ```
  - c.列表过渡
     - 1.使用<transition-group>进行列表过渡
         - I.不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
         - II.过渡模式不可用，因为我们不再相互切换特有的元素。
         - III.内部元素 总是需要 提供唯一的 key 属性值。
         - IV.CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
     ```
     <transition-group name="flip-list" tag="ul">//tag中是子元素li的父元素,渲染出来就是<ul><li></li>...</ul>
         <li v-for="item in items" v-bind:key="item">
           {{ item }}
         </li>
     </transition-group>
     ```