关键词：动画封装——进行可复用
一、如何封装？
1、使用：局部组件传递数据+局部组件中使用JS动画
2、原理：将动画效果完全第封装在一个名为<fade>的组件中，今后如要复用，只需要复制有其组件名的部分，然后修改dom元素标签名称。使用任何样式，只需要从组件中进行相应地修改，无需再在全局中定义CSS动画。
3、代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue中的动画封装</title><script src="./vue.js"></script>
</head>
<body><div id="root"><fade :show="show"><div v-show="show">hello world</div></fade> <fade :show="show"><h1 v-show="show">hello world</h1></fade> <button @click="handleClick">点击</button></div> <script>Vue.component('fade',{props: ['show'],template: `<transition @before-enter="handleBeforeEnter"@enter="handleEnter"><slot v-if="show"></slot></transition>`,methods: {handleBeforeEnter: function(el){el.style.color = 'red'},handleEnter: function(el,done){setTimeout(()=>{el.style.color = 'green'done()},2000)}}})var vm = new Vue({el: "#root",data: {show: false},methods: {handleClick: function(){this.show = !this.show}}})</script></body>
</html>试一下吧：
