文章目录

• 增加动画效果animate.css
• • 1: 在你static/css新增animate.css动画文件
  • 02、使用
  • 03、程序使用

增加动画效果animate.css

1: 在你static/css新增animate.css动画文件

官网下载地址：https://animate.style/

下载地址：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

自己增加延时的效果，默认的animate.css有只有几个。我增加的如下：

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2)
}

.animate__animated.animate__delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3)
}

.animate__animated.animate__delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4)
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5)
}

.animate__animated.animate__delay-6s {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-delay: calc(var(--animate-delay) * 6);
    animation-delay: calc(var(--animate-delay) * 6)
}

.animate__animated.animate__delay-7s {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-delay: calc(var(--animate-delay) * 7);
    animation-delay: calc(var(--animate-delay) * 7)
}

.animate__animated.animate__delay-8s {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-delay: calc(var(--animate-delay) * 8);
    animation-delay: calc(var(--animate-delay) * 8)
}


.animate__animated.animate__delay-9s {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    -webkit-animation-delay: calc(var(--animate-delay) * 9);
    animation-delay: calc(var(--animate-delay) * 9)
}


.animate__animated.animate__delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-delay: calc(var(--animate-delay) * 10);
    animation-delay: calc(var(--animate-delay) * 10)
}

.animate__animated.animate__delay-11s {
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
    -webkit-animation-delay: calc(var(--animate-delay) * 11);
    animation-delay: calc(var(--animate-delay) * 11)
}

.animate__animated.animate__delay-12s {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    -webkit-animation-delay: calc(var(--animate-delay) * 12);
    animation-delay: calc(var(--animate-delay) * 12)
}

.animate__animated.animate__delay-13s {
    -webkit-animation-delay: 13s;
    animation-delay: 13s;
    -webkit-animation-delay: calc(var(--animate-delay) * 13);
    animation-delay: calc(var(--animate-delay) * 13)
}

.animate__animated.animate__delay-14s {
    -webkit-animation-delay: 14s;
    animation-delay: 14s;
    -webkit-animation-delay: calc(var(--animate-delay) * 14);
    animation-delay: calc(var(--animate-delay) * 14)
}

.animate__animated.animate__delay-15s {
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-delay: calc(var(--animate-delay) * 15);
    animation-delay: calc(var(--animate-delay) * 15)
}

.animate__animated.animate__delay-16s {
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
    -webkit-animation-delay: calc(var(--animate-delay) * 16);
    animation-delay: calc(var(--animate-delay) * 16)
}

.animate__animated.animate__delay-17s {
    -webkit-animation-delay: 17s;
    animation-delay: 17s;
    -webkit-animation-delay: calc(var(--animate-delay) * 17);
    animation-delay: calc(var(--animate-delay) * 17)
}

.animate__animated.animate__delay-18s {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    -webkit-animation-delay: calc(var(--animate-delay) * 18);
    animation-delay: calc(var(--animate-delay) * 18)
}

.animate__animated.animate__delay-19s {
    -webkit-animation-delay: 19s;
    animation-delay: 19s;
    -webkit-animation-delay: calc(var(--animate-delay) * 19);
    animation-delay: calc(var(--animate-delay) * 19)
}

.animate__animated.animate__delay-20s {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
    -webkit-animation-delay: calc(var(--animate-delay) * 20);
    animation-delay: calc(var(--animate-delay) * 20)
}

02、使用

<!--进场动画-->
<div class="animate__animated animate__fadeInLeft animate__delay-1s">
<!--出场动画-->
<div class="animate__animated animate__fadeOutLeft animate__delay-1s">

03、程序使用

 :class="'square-item-detail  animate__animated animate__fadeInLeft animate__delay-'+((index+1)%20)+'s'"