问题：如果在slot标签上使用v-show，程序功能是无法实现的，必须改成v-if。
原因：slot实际是一个抽象元素，有点类似template,本质并不是一个元素。
而v-show是通过控制元素的display来进行显示和隐藏的，slot本身不是元素，所以压根就不会有display这个css属性
所以,slot显示隐藏,要使用v-if。
css动画在<style>中定义，js动画在@before-enter="handleBeforEnter"中定义
步骤：
1.定义一个名为fade 的组件，然后在加上transition模板，并在此模板中加入slot插槽，slot中v-if绑定“show”属性，它的显示与否取决于父组件fade传进来的show的变量是否是show
2.当使用的时候只需要在dom元素上包裹一层fade组件，并在fade组件上绑定show属性，令其等于子组件中v-if绑定的show内容。
3.推荐动画使用js动画而不是css动画，从而使所有动画代码封装在一个组件里。
<!DOCTYPE html>
<html>
<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>
<fade :show="show">
<h1>hello world
</h1>
</fade>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
Vue.component(‘fade‘,{
props:[‘show‘],
template:`
<transition @befor-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()
},4000)
}
}
})
var vm=new Vue({
el:‘#root‘,
data:{
show:false
},
methods:{
handleBtnClick:function(){
this.show=!this.show
}
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/tengteng0520/p/12076839.html
时间： 2024-10-10 01:45:13