1.动画封装之后可复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的列表过渡</title>
<script src="./vue.js"> </script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,v-leave-active{
transition:opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<fade :show="show">
<div>helloworld</div>
</fade>
<fade :show="show">
<h1>he</h1>
</fade>
<button @click="handleClick">add</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:'<transition><slot v-if="show">helloworld</slot> </transition>'
})
var count = 0;
var app = new Vue({
el:'#root',
data:{
show :false
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
2.样式也可以封装到动画里面(进一步封装)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的列表过渡</title>
<script src="./vue.js"> </script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,v-leave-active{
transition:opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<fade :show="show">
<div>helloworld</div>
</fade>
<fade :show="show">
<h1>he</h1>
</fade>
<button @click="handleClick">add</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show">helloworld</slot> </transition>',
methods:{
handleBeforeEnter:function(el){
el.style.color = 'red';
},
handleEnter:function(el,done){
setTimeout(() => {
el.style.color = 'green';
done()
}, 2000);
}
}
})
var count = 0;
var app = new Vue({
el:'#root',
data:{
show :false
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
