css - Vue.js转换-第一个入口不起作用

我做了一个Code Sandbox snippet来说明vue过渡在其初始外观上不起作用。

我正在使用以下CSS来实现滑入滑出效果：

.slide-fade-enter-active
  transition: all 2s ease;

.slide-fade-leave-active
  transition: all 2s ease;

.slide-fade-enter
  // /* .slide-fade-leave-active below version 2.1.8 */
  transform: translateX(40px) !important;
  opacity: 0;

.slide-fade-leave-to
  transform: translateX(-40px);
  opacity: 0;

我已经知道slide-fade-enter仍然适用，即使它是组件的初始呈现。

为了达到这个目的，我在想必中遗漏了什么？

最佳答案

要使过渡在初始渲染上起作用，请确保添加appear属性

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class">
  ...
</transition>

参考：https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

关于css - Vue.js转换-第一个入口不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55859515/