好资源导航 » 文章资讯 » vue transition 在子组件中失效的解决

vue transition 在子组件中失效的解决

2023-08-09 12:30:04 64

错误代码：

子组件：






.mask{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color:rgba(0,0,0,0.1);
z-index:10;
}
.my_group{
width:60%;
top:0;
bottom:0;
height:100%;
background-color:#fff;
position:fixed;
z-index:11;
}
.slide-fade-enter-active,
.slide-fade-leave-active{
transition:all0.3sease;
}
.slide-fade-enter,
.slide-fade-leave-to{
transform:translateX(-100%);
transition:all0.3sease;
}

父组件：






.nav{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
height:1.066667rem;
padding:00.266667rem;
box-sizing:border-box;
font-size:0.48rem;

.city{
font-size:0.373333rem;
color:#7e7e7e;
}
}
.mine,
.info,
.city{
height:100%;
line-height:1.066667rem;
}

效果：

修改代码只要把子组件中的的showMine放在mask元素中就可以

效果:

以上这篇vuetransition在子组件中失效的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue transition 在子组件中失效的解决

热门推荐

随机推荐