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;