统计
登录

注 册 新 用 户

JS实现列表依次进入特效

2020-08-27
/
7 评论
/
445 阅读
/
正在检测是否收录...
08/27

先定义几个ul li元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

定义li标签进入的特效

li {
    display: none
}
.fadeIn {
    display: block;
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

最后利用定时器依次添加类名即可

// jquery实现
let lis = $('li');
Array.from(lis).forEach((item, index) => {
    setTimeout(() => {
        $(item).addClass('fadeIn');
    }, 150 * index);
});
朗读
微信打赏
支付宝打赏
版权属于:

Joe の 博客

本文链接:

http://ae.js.cn/WEB/92.html(转载时请注明本文出处及文章链接)

评论 (7)
  1. 厉害厉害 作者

    支持一下

    2020-09-19 回复
    1. HaoOuBa 作者
      @厉害厉害

      谢谢支持。

      2020-09-24 回复
  2. xx 作者

    没找到你主题相关文章,想问一下如何添加备案号在网页底部啊。网上的教程不适合你的主题,因为你的主题下面的信息全部删除了,不知道添加在哪里

    2020-08-31 回复
  3. clever 作者

    可以可以 不错不错!!!

    2020-08-27 回复
  4. clever 作者

    天天摸鱼

    2020-08-27 回复
  5. clever 作者

    牛B 牛B

    2020-08-27 回复
  6. HaoOuBa 作者

    支持支持

    2020-08-27 回复

今日天气

标签云