CSS动画

类名

Animate组件会在元素enter/leave的时候增加以下类名

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

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

<Animate a:transition="fade">

可以将animate-enter替换为fade-enter，其它类名同理。

transition动画

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

<div>
    <button
        ev-click={self.set.bind(self, 'show', !self.get('show'))}
    >展示或隐藏</button>
    <Animate v-if={self.get('show')}>show</Animate>
</div>

.animate-enter, .animate-leave {
    opacity: 0;
    transform: translateX(10px);
}
.animate-enter-active, .animate-leave-active {
    transition: all 1s;
}

Intact.extend({template: template});

如果你快速点击按钮，你会发现元素会在中间状态来回切换，而不是突兀地跳到动画开始和结尾，这正是Intact在动画连贯性上做的工作，不过该特性只对transition动画支持较好。

animation动画

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

<div>
    <button
        ev-click={self.set.bind(self, 'show', !self.get('show'))}
    >展示或隐藏</button>
    <Animate v-if={self.get('show')}
        a:transition="fade"
    >show</Animate>
</div>

@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;
}

Intact.extend({template: template});

慎用animation-direction: reverse，它会让动画切换过快时，看起来不自然。

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