soc的复位reset/rst问题

一、Vue的动画效果

（一）编写CSS关键帧动画

@keyframes show{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}

（二）定义动画效果

.v-enter-active{
    animation: show 0.5s;
}

.v-leave-active {
    animation: show 0.5s reverse;
}

@keyframes show{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}

（三）在模板中使用效果

（四）动画的属性

我们能够在上面的transition标签中添加一些属性

1. name属性

该属性主要是解决添加多个动画的情况，如果全部都是v-xxx-active，样式就很单一。

因此我们可以给transition标签设置name属性，来标识动画对象。

 2. appear属性

如果我们想让页面一加载的时候就触发一次动画，就可以使用appear属性：

二、 Vue的过度效果

过度效果分为六个过程：

进入的起点，进入的过程，进入的终点

离开的起点，离开的过程，离开的终点

这里进入的过程和离开的过程就是上面的v-enter-active和v-leave-active。

很多时候进入的起点就是离开的终点，离开的起点就是进入的终点：

 这里的hello-xxx-xxx是给transition设置了name="hello"

/* 进入的起点，离开的终点 */
.hello-enter, .hello-leave-to {
    transform: translateX(-100%);
}

.hello-enter-active, .hello-leave-active {
    transition: transform 0.5s;
}

/* 进入的终点，离开的起点 */
.hello-enter-to, .hello-leave {
    transform: translateX(0);
}

三、多个元素过度

我们有多个元素要添加过度效果的时候就不能使用transition标签，也就是说一个transistion标签中只能给一个元素添加过度效果。

如上情况我们就要使用transition-group标签，并给里面的每一项添加一个唯一key值： 

四、集成第三方动画

我们可以使用第三方的集成库来使用动画，常用的有animate.css库：

Animate.css | A cross-browser library of CSS animations.

往下滑动就可以看到官方教程。

（一）安装animate.css

安装完成后在项目中进行引用这个CSS样式库 

（二）配置name属性

对目标添加样式的标签添加上name属性：

 （三）添加class样式

在侧边栏选中你心意的样式然后复制后面的样式码

将进入样式和离开样式分别配置在如下两个属性上：