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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javascript object array方法使用详解
Dec 03 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
js 数组详细操作方法及解析合集
Jun 01 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python redis 删除key脚本的实例
2019/02/19 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
大学社团计划书
2014/05/01 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
质量保证书怎么写
2015/02/27 职场文书