怎么理解vue2过渡效果中的appear?

Question

跟enter的区别是？

Answer 1

官方文档已经明确说了：

可以通过 appear 特性设置节点的在初始渲染的过渡

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

.custom-appear-class{
    font-size: 40px;
    color: red;
    background: green;
}

.custom-appear-active-class{
    background: green;
}

也就是当前transition元素第一次渲染时的过渡动画，它也提供了两个css动画钩子：
appear：表示是否开启此特性
appear-class：表示元素渲染完毕后应用的css样式，它里面的css样式会参与整个动画的过渡
appear-active-class：也表示元素渲染完毕后应用的css样式，它不参与整个动画的过渡