解决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 相关文章推荐
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
js转html实体的方法
Sep 27 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
uni-app之APP和小程序微信授权方法
May 09 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP多态代码实例
2015/06/26 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
详细探究Python中的字典容器
2015/04/14 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
值得收藏的10道python 面试题
2019/04/15 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
2014年协会工作总结
2014/11/22 职场文书
会议简报格式范文
2015/07/20 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python list列表删除元素的4种方法
2021/11/01 Python