进行动画封装的目的是 让我们的动画变得可以复用 如果想让dom元素向以前那样具有动画效果 只需要用一下创建的组件 然后传一个定义在子组件的变量 等于父组件中的变量
css动画的封装：将transition放进组件中的template中 然后写一个slot标签 也就是让代码传一些dom元素 然后传一个show变量给组件 根据变量判断外部传过来的dom是否要显示
<!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 3s;
}
</style>
</head>
<body>
<div id="root">
<!-- 传一个show变量 等于父组件中的show变量 -->
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<div>hello world</div>
</fade>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:`
<transition>
<slot v-if="show"></slot>
</transition>`
})
var vm = new Vue({
el:"#root",
data:{
show:false
},
methods:{
handleBtnClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
动画的封装还可以把入场动画样式和出场动画样式一起封装到动画组件里 主要是用before-enter（传递一个el参数）,enter（传递el和done参数，最后要手动调用一下done方法）,after-enter（传递一个el参数0这些钩子完成 用js动画 所有的动画都写在自己创建的子组件里 外部只需要调用这个组件 并不需要在全局里写一些动画效果 推荐使用这种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue中的动画封装</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="root">
<!-- 传一个show变量 等于父组件中的show变量 -->
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<div>hello world</div>
</fade>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:`
<transition @before-enter="handleBforeEnter"
@enter="handleEnter">
<slot v-if="show"></slot>
</transition>
`,
methods:{
handleBforeEnter: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:{
handleBtnClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
- 还没有人评论，欢迎说说您的想法！
