Vue.js 过渡 - 第一个入口不起作用答案

【问题标题】：Vue.js Transitions - 1st Entrance Not WorkingVue.js 过渡 - 第一个入口不起作用
【发布时间】：2019-04-26 01:11:06
【问题描述】：

我创建了一个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 仍然适用，即使它是组件的初始渲染。

为了实现这一目标，我在我的 sass 中缺少什么？

【问题讨论】：

标签： css vue.js sass

【解决方案1】：

要使过渡在初始渲染中起作用，请确保添加 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

【讨论】：