Vue过渡 - 转换翻译不起作用

Question

所以我有以下代码：

HTML：

<transition name="slide-left-centered">
  <div v-if="test" style="position: fixed; transform: translate(0, 100%)">
    test code
  </div>
</transition>

CSS：

.slide-left-centered-enter,
.slide-left-centered-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-left-centered-enter-active {
    transition: all .3s ease;
}

.slide-left-centered-leave-active {
    transition: all .5s ease;
}

如果我要打开和关闭它，它只会因不透明度​​而消失但不会移动。一旦我从HTML中删除了转换，这就可以了。

https://codesandbox.io/s/92mv6ov6xy

Answer 1

我已经找到了问题

这不适用于内联样式先行。

在我真正的问题中，它使用的是另一个类的子类。它不起作用的原因是因为特异性。我已将!important添加到过渡类中，现在它可以正常工作。

transform: translateX(-100%) !important;