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

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;
    }

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理