CSS动画

    1. animate-enter-active：元素进入过程中添加，可以定义元素进入的动画效果
    2. animate-leave: 元素开始离开时添加，定义元素离开后的最终状态
    3. animate-leave-active：元素离开过程中添加，定义元素离开的动画效果

    以上这些类名的前缀animate可以通过Animate组件的a:transition属性改变。例如：

    通过css动画的类名，我们可以很方便地定义transition动画。

    1.     <button
    2.         ev-click={self.set.bind(self, 'show', !self.get('show'))}
    3.     >展示或隐藏</button>
    4. </div>
    


    你可以使用css animation属性来设置动画。与transition不同的是，animation动画会在同一帧添加animate-enter-active类名，而transition则是在下一帧添加它。这样做的目的是：保证动画可以顺利触发，并且不会闪动。
    


    @keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(10px);
    }
}
.fade-enter-active {
    animation: fadeIn 1s;
}
.fade-leave-active {
    animation: fadeOut 1s;
}

    



    

    不要同时使用与animation，会使问题变得复杂。