**

// appear=> true 初始化条目页面以执行动画。 原生vue直接使用

// 注意:没有name 样式是直接使用的。v-enter-active
// 有name 需要使用样式hello-enter-active
// 样式中的动画名称是固定的。 默认用v- 有name 用的是hello
// transtion 没有任何实际效果,跟block意思很像;
**

## 方法一  使用动画


    
hello world


.v-enter-active{
    animation:动画名  .5  linear;
}

.v-leave-active{
    animation:动画名  .5  linear  reverse;
}

@keysframes 动画名 {
    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(0px);
    }
}

## 方法二 使用过度实现的动画效果 v-  可以换成 name-

.v-enter , .v-leave-to{
    transform:translateX(0px);
}
.v-leave, .v-enter-to{
    transform:translateX(-100%);
}

.v-enter-active ,.v-leave-active{
    transtion:.5 linear;
}

**

使用Animate.css

**

animate.css 成型的库;直接安装阴影
参考文档 :https://animate.style/#documentation

// 这份文件太乱了。 定义和总结你自己
第一步,安装 npm install animate.css --save
第二步,引入 import ‘animate.css’
第三步,1)第一个箭头 固定的name => animate__animated animate__bounce

2)上面的第二个和第三个箭头 去官网选择想要的款式并写下来。官网效果和复制样式粘贴，如下图所示