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


Posted in Javascript onNovember 12, 2019

错误代码:

子组件:

<template>
 <div v-show="showMine">
  <div class="mask" @click.self="onMask"></div>
  <transition name="slide-fade">
   <div class="my_group" v-if="showMine">我的</div>
  </transition>
 </div>
</template>
 
<script>
export default {
 name: "mine",
 props: ["showMine"],
 data() {
  return {};
 },
 methods: {
  onMask() {
   this.$emit("onMask");
  }
 }
};
</script>
 
<style lang="less" scoped>
.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: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
 transform: translateX(-100%);
 transition: all 0.3s ease;
}
</style>

父组件:

<template>
 <div class="headers">
  <div class="nav">
   <div class="mine" @click="onMine">
    <i class="cubeic-person"></i>
   </div>
   <div class="city">
    深圳市
    <i class="cubeic-pulldown"></i>
   </div>
   <div class="info">
    <i class="cubeic-message"></i>
   </div>
  </div>
  <app-mine :showMine="showMine" @onMask="onMask" />
 </div>
</template>
 
<script>
import appMine from "../Mine";
export default {
 name: "headers",
 components: {
  "app-mine": appMine
 },
 data() {
  return {
   showMine: false
  };
 },
 methods: {
  onMine() {
   this.showMine = true;
  },
  onMask() {
   this.showMine = false;
  }
 }
};
</script>
 
<style lang="less" scoped>
.nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 height: 1.066667rem;
 padding: 0 0.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;
}
</style>

效果:

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

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

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

效果:

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

以上这篇vue transition 在子组件中失效的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
JS动画定时器知识总结
Mar 23 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 #Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 #Javascript
Vue退出登录时清空缓存的实现
Nov 12 #Javascript
解决vue admin element noCache设置无效的问题
Nov 12 #Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 #Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 #Javascript
vue 中几种传值方法(3种)
Nov 12 #Javascript
You might like
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
学习php分页代码实例
2013/10/24 PHP
php获取字段名示例分享
2014/03/03 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python添加模块搜索路径方法
2017/09/11 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
相亲大会策划方案
2014/06/05 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server