解决vue 退出动画无效的问题


Posted in Javascript onAugust 09, 2020

遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了。

写个简单的结构:

<div class="<strong>mask</strong>" v-show="warning"><br>
<transition name="warning"><br>


<div v-show=“warning” class="warning-modal"><br>



<p>请登录</p><br>


</div><br>

</transition><br></div>

.mask是遮罩层,.warning-modal是显示模态框的内容。

如果像上面的结构,会遇到我上述的问题。因为warning-modal包裹在.mask遮罩层里面。但是.mask没有动画,一点击关闭,.mask没有动画,就直接消失了,warning-modal跟着.mask消失,它的退出动画我们也就看不到了。如果把transition放在外面。

<transition name="warning">
  <div class="mask" v-show="warning">

<div v-show=“warning” class="warning-modal">



<p>请登录</p>


</div>
  </div>

</transition>

很显然 ,遮罩层也会跟着提醒框有动画!

我的解决方法的做法是加两个transition

<transition name="mask">
  <div class="mask" v-show="warning">
   <transition name="warning">

  <div v-show=“warning” class="warning-modal">



 <p>请登录</p>


  </div>


</transition>

</div>

</transition>

//然后给maskde 退出动画增加transition-delay属性。

.mask-leave-active{
   transition:all 1s;
   transition-delay:1s;
}

补充知识:vue利用三目运算符绑定class

通过三目运算符来绑定class是一种比较常见的操作

需要注意的是要在data里面声音下class的名称

<p :class="isIncrse?incrseP:downP">环比<i></i>{{item.num}}</p>
data() {
  return {
    isIncrse: true,
    incrseP: 'incrseP',
    downP: 'downP'
  }
}
.downP {
  color: red;
}
.incrseP {
  color: pink;
}

以上这篇解决vue 退出动画无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
简述JS控制台的使用
Jul 15 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 #Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 #Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python手机号码归属地查询代码
2016/05/04 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python datetime模块使用方法小结
2020/06/18 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
学生打架检讨书大全
2014/01/23 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
审计专业自荐信范文
2014/04/21 职场文书
社会学专业求职信
2014/07/17 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
烟台的海导游词
2015/02/02 职场文书
学生通报表扬范文
2015/05/04 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript