遇到一个问题,给模态框进入退出动画,进入的动画有可是推出的动画就没有了。
写个简单的结构:
<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没有动画,比warning-modal早消失,我们没看到。warning的动画就随着.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;
}