uni使用animate动画常见问题

2022年圣诞节到来啦，很高兴这次我们又能一起度过~
不负2022，再战2023，感恩相遇

一、前言

最近在做一个uni小程序的项目，总是感觉页面平平无奇太过生硬的，因此想到了写一些动画。css的常用动画属性transform和keyframs。如果要写一写简单的动画的话，手撸代码也行。但是，既然是简单的。那么为啥不用封装好的呢。

二、animate.css动画

官网地址：Animate.css | A cross-browser library of CSS animations.

https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

这个其实就是一个css，封装了一些常用动画，比如淡入，淡出，旋转等等。基本各种常用入场出场动画都封装好了。直接引入即用，是不是很方便。基本用过的人都说好。

二、uniapp使用过程 

1.项目如果是脚手架的，那就直接通过依赖包引入。

$ npm install animate.css --save  或者
$ yarn add animate.css

import 'animate.css';

2.uniapp小程序的项目，没有依赖包的，那就直接csdn下载本地引入。

引入之后，使用过程中出现不生效解决办法。找到引入的animate.css

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
//修改为
page {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

3.通过事件触发动画

在vue项目中，想通过事件的方式多次触发动画。实现原理是添加动画的class样式，在动画完成后移除这个样式，当事件触发时再加上这个样式

我这里代码举例说明下。假如有一个动画class样式：Anim。(这里后面代入animate.css的动画样式即可)。

.Anim{
  animation: showMsg 0.6s;
}
 
@keyframes showMsg
{
  from {opacity: 0;}
  to {opacity: 1}
}

设置一个参数用来控制触发动画效果，并通过事件来控制这个参数，来达到动画的效果。

export default {
    name: 'anmiTest',
    data () {
      return {
        inAnimation:true
      }
    },
    methods:{
        changeanimate(){
            this.inAnimation=true;
        }
    }
}

 template内绑定动画样式，设置在动画结束后把标志位置false，animationend事件是表示在动画结束后执行。这样就不断的可以通过事件changeanimate来触发动画了。

<template>
  <div :class="inAnimation?'Anim':''" @animationend='inAnimation=false'>
    test
  </div>
</template>

4.animate使用

直接调用对应的class名即可。别忘了加上：animate__animated

<h1 class="animate__animated animate__bounce">An animated element</h1>