Vue transition使用

// 单元素、单组件 出场 入场 动画
// 入场：从隐藏态到显示
// 出场：从显示态到隐藏

 <style>

        /*
        过渡 动画的封装
        */

        /* 入场*/
        /*开始*/
        .v-enter-from {
   
            opacity: 0;
        }
        /*整个过程怎么执行*/
        .v-enter-active {
   
            transition: opacity 3s ease-out;
        }
        /*结束*/
        .v-enter-to {
   
            opacity: 1;
        }

        /* 出场*/
        .v-leave-from