05-Vue过渡&动画

Vue 过渡&动画（12-Vue过渡&动画.html）

  • 通过 控制 class，来展示动画

  • 使用过渡类名实现动画：

    • 使用 transition 元素，把需要被动画控制的元素，包裹起来（transition 元素，是Vue官方提供的
    • 自定义两组样式，来控制 transition 内部的元素实现动画

  • 修改 -v 前缀，区分不同组之间的动画

  • 使用第三方类(animate.css)实现动画

    • 注意：别忘了添加 class='animated'

  • 使用 :duration='毫秒值' 来统一设置 入场 和 离场 的动画时间

    • 也可以 使用 :duration='{ enter: 1000, leave: 100 }' 来分别设置 入场 和 离场 时长

半场动画（只有 入场 动画）

  • 可以在 attribute 中声明 JavaScript 钩子
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:enter-cancelled="enterCancelled"

    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
  >
    <!-- ... -->
  </transition>

  // ...
  methods: {
   // --------
   // 进入中
   // --------

   beforeEnter: function (el) {
     // ...
   },
   // 当与 CSS 结合使用时
   // 回调函数 done 是可选的
   enter: function (el, done) {
     // ...
     done()
   },
   afterEnter: function (el) {
     // ...
   },
    enterCancelled: function (el) {
      // ...
    },

    // --------
    // 离开时
    // --------

    beforeLeave: function (el) {
      // ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    leave: function (el, done) {
      // ...
      done()
    },
    afterLeave: function (el) {
      // ...
    },
    // leaveCancelled 只用于 v-show 中
    leaveCancelled: function (el) {
      // ...
    }
  }

列表动画（13-列表动画.html）

组件切换-切换动画 （17-组件切换-切换动画.html）

posted @ 2021-07-30 10:31  真的想不出来  阅读(21)  评论(0)  编辑  收藏  举报