v-if v-else 组件显示隐藏的动画效果

当我们显示隐藏，切换组件的时候效果特别的生硬，我们需要用到动画来缓解一下

     <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
        <div v-if="state.changeVoice">
            <div>有变更未保存</div>
        </div>
     </transition>



//css

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}

Vue 提供了一个内置的 <transition> 组件，可以用来在元素的进入和离开时添加动画效果。你可以结合 CSS 动画或者过渡来实现平滑的显示效果。

在这个示例中，我们定义了一个名为 fade 的过渡效果。当元素进入和离开时，它的 opacity 属性会平滑地从 0 到 1 变化，或从 1 到 0 变化。