zoukankan      html  css  js  c++  java
  • vue 退出动画无效解决方法

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

    写个简单的结构:

    <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;
    }

      

  • 相关阅读:
    init进程解析rc文件的相关函数分析
    Ubuntu 安装Android Studio与使用手册
    Vim的撤销与重做
    Vim 配色设置与配色脚本语法
    js常用的语句
    xshell常用的命令
    java常用的语句
    maven工程配置日志
    根据一个oss的pdf文件的 地址转换成一个File文件
    根据一个oss的地址把图片转换成一个文件
  • 原文地址:https://www.cnblogs.com/qiu-freedom/p/10559577.html
Copyright © 2011-2022 走看看