样式的优先级导致Transition过渡动画失效的问题

原因

首先,在Vue的Transition中我们可以通过类名去设置进入和离开时的过渡动画效果,这些过度动画效果将作用到Transition的子元素中。

Transition Diagram

以Vue2为例,Transition共有六个过度类名:v-enterv-enter-activev-enter-tov-laevev-laeve-activev-laeve-to。而既然是类名,就必须遵循样式的优先级和权重规则。所以,在遵循优先级和权重规则的时候就可能导致过度类名内的样式失效,从而导致过渡效果失效。

样式的优先级和权重大致规则:

  • !important(10000)>行内样式(1000)>ID选择器(100)>类、属性、伪类选择器(10)>标签选择器(1)>通用选择器(0);
  • 权值相同时,后面的选择器会覆盖前面的选择器相同的属性;

例子

<template>
<Transition name="depart-situation">
    <div v-if="visible" style="position: absolute;top: 0;left: 0;z-index: 100;">Example</div>
    </Transition>
</template>
<style>
    .depart-situation-enter-active, 
    .depart-situation-leave-active, {
        transition: all .5s;
    }
    .depart-situation-enter,
    .depart-situation-leave-active {
        left: 100%;
    }
</style>

以上例子是想让元素有一个从右侧进入的过度效果,思路上没啥问题,但实际是没有效果的。首先需要知道的是,为了使过渡动画正常运行,我们要确保过度类名保持较高的权重,避免内部属性在使用的时候失效。而上面过度动画失效的原因就是把元素的left: 0;属性放在了行内样式中了。行内样式的优先级远高于过度类名,所以depart-situation-enterdepart-situation-leave-activeleft: 100%;是无效的,所以过度动画就失效了。

接下来,把行内样式挪到类depart-situation-block中,如下代码:

<template>
<Transition name="depart-situation">
    <div v-if="visible" class="depart-situation-block">Example</div>
    </Transition>
</template>
<style>
    .depart-situation-enter-active, 
    .depart-situation-leave-active, {
        transition: all .5s;
    }
    .depart-situation-enter,
    .depart-situation-leave-active {
        left: 100%;
    }
    .depart-situation-block{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
    }
</style>

这时候的过度效果还是失效的,原因在于depart-situation-block的优先级高于depart-situation-enter,从而导致depart-situation-enterleft: 100%;失效了。解决方案可以有很多种,比如给.depart-situation-enter,.depart-situation-leave-activeleft: 100%;!important或者把.depart-situation-block挪到前面…

总结

在Vue使用Transition时,子元素中更高优先级的样式属性可能会导致过度类名中的样式属性失效,可以通过调整样式的优先级来修复此问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值