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

原因

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

以Vue2为例，Transition共有六个过度类名：v-enter、v-enter-active、v-enter-to、v-laeve、v-laeve-active和v-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-enter和depart-situation-leave-active的left: 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-enter的left: 100%;失效了。解决方案可以有很多种，比如给.depart-situation-enter,.depart-situation-leave-active的left: 100%;加!important或者把.depart-situation-block挪到前面…

总结

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