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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
微信JSSDK上传图片
Aug 23 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
php的扩展写法总结
2019/05/14 PHP
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js调用css属性写法
2013/09/21 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python中的getopt函数使用详解
2015/07/28 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
Python爬虫教程知识点总结
2020/10/19 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
企业文化建设实施方案
2014/03/22 职场文书
交通事故私了协议书
2014/04/16 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
学困生转化工作总结
2015/08/13 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers