关于uni-app:uni-引入-animatecss-v4版本教程

9次阅读

共计 443 个字符,预计需要花费 2 分钟才能阅读完成。

1. 官网链接 https://animate.style/

2. 引入步骤:
(1)npm install animate.css –save

(2)App.vue 中 @import ‘animate.css’

(3)页面中应用(留神双横线连贯):

<div class='life'>
    <div class="animate__animated animate__swing animate__infinite animate__slower animate__delay-2s"> 你好今天 </div>
</div>

属性介绍(详见官网)
①animate__animated 固定值
②animate__swing 动画类名
③animate__infinite 反复次数
④animate__slower 执行速度
⑤animate__delay-2s 提早两秒执行

(4)而后你会发现页面还是静止的,因为还有最要害的一步 - 定义初始变量,实现!!

.life {
    --animate-duration: 1s;
    --animate-delay: 1s;
    }

正文完
 0