本文最后更新于2019年3月19日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
如果我们想多次使用某个动画效果，我们可以给它做一个封装，以达到复用的效果。
首先
我们把效果写在子组件的模板里：
- Vue.component('child',{
- template: '<transition @enter="enter" @leave="leave"><slot></slot></transition>',
- methods: {
- enter: function (el,done) {
- Velocity(el, { rotateX: '100deg' }, { loop: 2 ,complete: done })
- },
- leave: function (el,done) {
- Velocity(el, { rotateX: '100deg' }, { loop: 2 ,complete: done })
- }
- }
- })
然后
将需要进行动画显示的内容写在组件标签内：
- <button @click="see=!see">点我</button>
- <child>
- <p v-if="see">我是动画！</p>
- </child>
注意
动画效果使用的velocity.js库，所以不要忘记了在head中引用。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
