Vue中CSS动画怎么实现

显示的过程：

在动画即将被执行的瞬间，会往div上增加两个class名：fade-enter、fade-enter-active。然后去掉fade-enter，增加fade-enter-to。接着动画继续执行，到结束的瞬间，会把最后两个class去掉。

隐藏的过程：

为啥style标签里的class以fade开头呢？因为我在transition取名就是fade。如果不取名，默认是v。例如：v-enter、v-enter-active。

实例代码：

    
    
    
    
    
        .fade-enter {
            opacity: 0
        }
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    


    
        //name随便取名:
        
            hello