在vue中快速使用css简单动画

一般情况，在vue中使用动画，如果只是简单的动画，那么可以直接在animate.css上面找到需要的效果，查看其css文件，将其对应的类拷贝到css中，然后再应用到需要显示动画效果的元素上就可以了。
animate.css官网：添加链接描述
Example:

在vue中给元素添加一个向上滑动的动画

1、在animate中找到slideInUp相关的类，如下：

 @keyframes slideInUp {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
  }

将其拷贝到css文件中
2、自己再增加css样式

.animated{
    animation: slideInUp 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

3、给元素使用就自动有动画了

<div class="animated">向上滑动</div>

来源：CSDN

作者：m0_38081413

链接：https://blog.csdn.net/m0_38081413/article/details/103497109