如何让一个vue的页面动起来（关于vue的动画）

什么是前端动画

正所谓，一动不动是–。一个不会动的页面就犹如一滩死水，提不起别人阅读探索的兴趣，现如今不管是移动端，还是PC端，又或者是各种类型的项目，动画基本是一个项目分不开的部分，也是更好展示页面的一个重要环节。

什么是前端的动画，简而言之就是让我们页面上的元素根据一定的规则，使其发生变化，并且将这变化的过程展现出来。这样的一个流程就叫做动画。

至于在vue种实现动画的几种方式，则有以下几种：

动画的实现方式

1、transition属性，css中的一个代表转变的属性，每当我们给元素设定的元素值发生变化时，页面就会将中间的过程，按照我们制定的时间去展示一个简单的动画。例如我们设置一个div的top为0，然后再去改变为100，如果我们设置了transition监听，中间就会出现一个偏移的过程。

.test{
   
  width: 100px;
  height: 100px;
  position: relative;
  top: 0;
  transition: all 1s ease;
}

document.querySelector('.test').setAttribute("style", "top: 100px")

设置好对应元素的transition属性，该元素就会在top属性发生变化的时候去执行对应的动画。

2.纯CSS操作@keyframe，通过设置初始状态和结束状态去展现动画，不影响原有的样式。

/* fadeTop200 */
@keyframes fadeTop200 {
   
    from {
   
        top: -200px;
        opacity: 0;
    }

    to {
   
        top: 0;
        opacity: 1;
    }
}

@-moz-keyframes fadeTop200

/* Firefox */
{
   
    from {
   
        top: -200px;
        opacity: 0;
    }

    to {
   
        top:</