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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
js 提交和设置表单的值
2008/12/19 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
js简易版购物车功能
2017/06/17 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python requests指定出口ip的例子
2019/07/25 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
运动会方阵解说词
2014/02/12 职场文书
经典演讲稿汇总
2014/05/19 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
员工离职感谢信
2015/01/22 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书