<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"> </script>
</head>
<body>
<section class="app">
<fade :showw="show">
<article >hi</article>
</fade>
<button @click="handle">Select</button>
</section>
<script>
Vue.component("fade", {
props:["showw"],
template: `<transition @before-enter="hanle"
@enter="handleenter"
@after-enter="after">
<slot v-if="showw"></slot>
</transition>`,
methods: {
hanle: function (el) {
el.style.color = "blue"
},
handleenter: function (el, done) {
setTimeout(() =>{
el.style.color= "green"
},2000)
setTimeout(() =>{
done()
},4000)
}
}
})
var vm = new Vue({
el:".app",
data: {
show: true
},
methods: {
handle: function () {
this.show = !this.show
}
}
})
</script>
</body>
封装待续