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

      

  • 相关阅读:
    C++类型转换(字符串)
    GDI+ 中Image::FromStream ,用流的方式显示图像
    mfc对话框序列化实例
    配置android开发环境eclipse获取ADT获取不到(转)
    vs开发错误总结
    MFC获取文件操作
    Android系统架构剖析(转)
    OpenCV 图像采样 插值 几何变换
    C++ char*,char[],string,CString转换
    Simscape Multibody 教程 —— 入门学习
  • 原文地址:https://www.cnblogs.com/qiu-freedom/p/10559577.html
Copyright © 2011-2022 走看看