Vue中的动画封装
2019-03-29 本文已影响0人
李浩然_6fd1
<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">
<transition>
<div v-show="show">hello world</div>
</transition>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data: {
show: false
},
methods: {
handleBtnClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
这种渐隐渐现的动画，如果我以后想用的多，可以进行动画的封装，
封装好的代码如下：
<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>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>
我在script中创建一个组件，名字叫fade，然后做了一个模板template，里面想加入过渡效果的内容，即加入了标签transition，加入插槽slot是因为我想使用外来传入的数据，这样我想使用的自由度就更高了。
在id=“root”的div标签内，我使用了这个fade组件，然后我在组件内插入了我想写入的数据，内容是hello world。但是这样并不可以使两个组件间进行通讯，要使父组件传数据给子组件，则需要通过属性传递：设置绑定fade属性show等于show，在Vue的子组件中用props接收这个组件的名字，接收后在slot标签中使用。
显现的效果如下：
图片.png
当然也可以给内容hello world换一个标签，换成h1,；也可以给hello world换成别的，比如hello 世界
修改内容如下：
<div id="root">
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<h1>hello world</h1>
</fade>
<fade :show="show">
<div>hello 世界</div>
</fade>
<button @click="handleBtnClick">toggle</button>
</div>
网页显示的内容如下：
图片.png
可以看出，设置slot标签后，我在div内容上可以插入自由度很高的插槽，插入不同的标签，或者不同的数据内容。
但是我也试了下，不可以在一个fade标签内，插入两个标签，比如插入两个div标签，即使插入后，第二个标签的内容也显示不出来。
当然标签style的内容也可以进行封装。
<head>
<meta charset="UTF-8">
<title>Vue中的动画封装</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<fade :show="show">
<div>hello world</div>
</fade>
<button @click="handleBtnClick">toggle</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: {
handleBtnClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
将style也封装，那么就删掉style标签内的内容，在组件内进行代码，这样就不需要CSS，而使用js进行效果的替代。
在标签transition内，定义钩子before-enter和enter的名字，然后在下面将这个函数给定义出来：一开始是红色，然后两秒后变成绿色。
