vue离开动画失效原因

使用vue过渡和动画，进入动画可以，离开动画失效，通过以下办法解决

css 样式设置动画

.component-enter-active,
.component-leave-active {
    transition: transform 0.4s;
}
.component-enter{
    transform: translateX(100%);
    opacity: 0;
}
.component-leave-to{
    transform: translateX(-100%);
    opacity: 0;
}

html结构

<button @click="view = 'v-a'">A</button>
<button @click="view = 'v-b'">B</button>
<div style="text-align: center;">
  <transition name="component" appear  mode="out-in">
     <component v-bind:is="view"></component>
  </transition>
</div>

这样设置以后无法实现离开动画效果，需要将 transition: transform 0.4s; transform 改为 all 即可