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 相关文章推荐
20个最新的jQuery插件
Jan 13 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
原生JS实现层叠轮播图
May 17 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
详解react服务端渲染(同构)的方法
Sep 21 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP crc32()函数讲解
2019/02/14 PHP
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
TCP/IP的分层模型
2013/10/27 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
校园门卫岗位职责
2013/12/09 职场文书
毕业自荐书
2013/12/09 职场文书
服务之星获奖感言
2014/01/21 职场文书
个人工作表现评语
2014/04/30 职场文书
ktv筹备计划书
2014/05/03 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
公司开业主持词
2015/07/02 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书