vue 退出动画无效解决方法
2024-08-31 15:01:15
遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了。
写个简单的结构:
<div class="mask" v-show="warning">
<transition name="warning">
<div v-show=“warning” class="warning-modal">
<p>请登录</p>
</div>
</transition>
</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;
}
最新文章
- DrawerLayout的openDrawer()和closeDrawer()方法
- asp.net sqlite 当插入数据后的第一次访问会变的很慢!
- ORACLE 误删除视图恢复
- Eclipse Android 解决Gen文件夹为空的问题
- Mybatis if test中字符串比较
- 转:如何在32位程序中突破地址空间4G的限制
- c/c++ 指针理解(1)
- IOS学习3
- OpenGL第15,16,17讲小结
- Hibernate之Session对象的相关方法以及持久化对象的状态
- TextView &; EditText
- 【HDOJ】2844 Coins
- DB2 replace into实现
- 经验分享:Xcode 创建.a和framework静态库
- ARP/代理ARP
- Linux遗忘root密码的其中两种解决方法
- jquery for循环判断是否重复
- layui
- url的参数解析成key-value
- Python 列表复制