使用Animate.css快速构建动画。

最新推荐文章于 2025-08-03 16:30:45 发布

转载最新推荐文章于 2025-08-03 16:30:45 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59f85346f265da430e4e7749

本文介绍了一种通过CSS的animation-delay属性来实现动画层次感的方法，并提供了具体的代码示例。此外，还介绍了如何利用JavaScript控制元素的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <style>
     .wrap1 li:nth-of-type(1){
        animation-delay: 0s;
    }
    .wrap1 li:nth-of-type(2){
        animation-delay: .1s;
    }
    .wrap1 li:nth-of-type(3){
        animation-delay: .2s;
    }
    .wrap1 li:nth-of-type(1) .user{
        animation-delay: .4s;
    }
    .wrap1 li:nth-of-type(2) .user{
        animation-delay: .5s;
    }
    .wrap1 li:nth-of-type(3) .user{
        animation-delay: .6s;
    }
    .wrap1 li:nth-of-type(1) .icon{
        animation-delay: 0.4s;
    }
    .wrap1 li:nth-of-type(2) .icon{
        animation-delay: 0.5s;
    }
    .wrap1 li:nth-of-type(3) .icon{
        animation-delay: 0.6s;
    }
   </style>

    设置animation-delay  可以让动画有点小层次感

<li class="animated bounceInLeft">
    <div class="user animated bounceInLeft"></div>
    <p class="animated fadeInRightBig">发的斯蒂芬第三方水电费</p>
    <div class="icon animated bounceInUp"></div>
</li>
<li class="animated bounceInLeft">
    <div class="user animated bounceInLeft"></div>
    <p class="animated fadeInRightBig">发的斯蒂芬第三方水电费</p>
    <div class="icon animated bounceInUp"></div>
</li>
<li class="animated bounceInLeft">
    <div class="user animated bounceInLeft"></div>
    <p class="animated fadeInRightBig">发的斯蒂芬第三方水电费</p>
    <div class="icon animated bounceInUp"></div>
</li>
<button>sdfsdf</button>


使用animate 时,所添加动画的对象，必须要有个 animated -》class

<script>
var _btn = document.querySelector("button");

_btn.onclick = function(){
    [].forEach.call(document.querySelectorAll(".wrap1 *"),function (item){

        item.types = item.className;
        item.className = "";

    });

    setTimeout(function (){
        [].forEach.call(document.querySelectorAll(".wrap1 *"),function (item1){
            item1.className = item1.types;
        })
    },100)
};复制代码

document.querySelector('ul *') 就是得到ul 下所有元素节点;得到的数组是类似组类型，不具有 Arry 的方法，所有不用调用forEach方法只能用call 强行替换this；或者用for 大家都非常熟悉；

保留当前 item 的class 寄存在 types 中，随不会直接显示在html 的属性里。但console.log一下还是可以打印出来的。只要相同
item 时都存在当前 types 属性