Vue中的动画封装

2019年3月21日08:13:17 发表评论 48 阅读

Vue中的动画封装

如果我们想多次使用某个动画效果,我们可以给它做一个封装,以达到复用的效果。

首先

我们把效果写在子组件的模板里:

  1. Vue.component('child',{
  2.         template: '<transition @enter="enter" @leave="leave"><slot></slot></transition>',
  3.         methods: {
  4.             enter: function (el,done) {
  5.                 Velocity(el, { rotateX: '100deg' }, { loop: 2 ,complete: done })
  6.             },
  7.             leave: function (el,done) {
  8.                 Velocity(el, { rotateX: '100deg' }, { loop: 2 ,complete: done })
  9.             }
  10.         }
  11.     })

 然后

将需要进行动画显示的内容写在组件标签内:

  1. <button @click="see=!see">点我</button>
  2.     <child>
  3.         <p v-if="see">我是动画!</p>
  4. </child>
注意

动画效果使用的velocity.js库,所以不要忘记了在head中引用。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛