Question

我正在尝试动画我的投资组合页面的这一部分：

我希望这5个酒吧中的每一个都能一次点亮一个。

以下是相关代码：

HTML：

<div class="row">
    <div class="col-lg-12 skill-item">
        <div class="row">
            <div class="col-lg-2"><i class="devicon-html5-plain-wordmark"></i></div>
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-lg-12 skill-bar">
                        <div class="row">
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>
                            <div class="col-lg-2 skill-rank-inactive"></div>                                    
                            <div class="col-lg-2 skill-rank-inactive"></div>                                    
                        </div>
                    </div>
                    <div class="col-lg-12 skill-level">
                        HTML5
                    </div>
                </div>
            </div>
        </div>
    </div>

SCSS：

.skill-rank-inactive {
    background: white;
    border: 2px solid white;
    height: 3vh;
    transition: all 2s;
}

#back-end { 
    .skill-rank-active {
        background: $green;
        border: 2px solid white;
        height: 3vh;
    }

    i {
        color: $green;
    }
}

#front-end {
    .skill-rank-active {
        background: $blue-bright;
        border: 2px solid white;
        height: 3vh;
        transition: all 2s;
    }

    i {
        color: $blue-bright;
    }
}

使用Javascript：

$('#skills-page').bind('inview', function() {
    $('.skill-rank-inactive').addClass('skill-rank-active');
    $('.skill-rank-inactive').removeClass('skill-rank-inactive');
});

有没有办法在每个＆＃34;技能等级＆＃34;的转换之间增加500毫秒的延迟？在页面上？会有多种技能，如PHP，CSS等......我希望每个技能同时启动，即。每个技能的第一个等级从下一个等级开始，然后是500毫秒。

Answer 1

我决定采用本网站上的方法：

https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/

Answer 2

你可以使用带有setTimeout（）

的循环

$('#skills-page').bind('inview', function() {

    var delay = 0;

   $.each( $('.skill-rank-inactive'), function(){
        var element = $(this);
        setTimeout(function(){
            element.addClass('skill-rank-active')
            element.removeClass('skill-rank-inactive');
        },delay);

        delay += 500;
    });

});

我知道setTimeout不是jquery，但问题是：

＆＃34;有没有办法在每个转换之间添加500毫秒的延迟＆＃34;技能等级＆＃34;在页面上？＆＃34;

Answer 3

没有javascript的解决方案：5个元素保持不变。然后有一个单独的元素（我将使用伪:after元素）移动以依次覆盖每个元素，并且当它覆盖它时会短暂地照亮。

// No javascript needed! :D

@keyframes moving-light {
  0% { margin-left: 1%; }
  80% { margin-left: 81%; }
  100% { margin-left: 81%; }
}
@keyframes blinking-light {
  0% { opacity: 0; }
  65% { opacity: 1; }
  100% { opacity: 0; }
}

.lightup {
  position: relative;
  width: 100%; height: 30px;
  font-size: 0; /* Get rid of any inline spaces between elements */
}
.lightup > .box {
  display: inline-block;
  width: 18%; height: 100%;
  margin-left: 1%; margin-right: 1%;
  background-color: #a00000;
}
.lightup:after {
  content: "";
  position: absolute;
  display: block;
  width: 18%; height: 100%;
  left: 0; top: 0;
  background-color: #ff4040;
  opacity: 1;
  
  animation:
    5s steps(4, end) infinite moving-light,
    1s ease-out infinite blinking-light;
}

<div class="lightup">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 4

您可以使用setTimeout函数来延迟某些内容

//延迟500毫秒

import requests
from bs4 import BeautifulSoup as BS
url = 'http://www.dailymail.co.uk/femail/article-4703718/How-Alexander-McQueen-Kate-s-royal-tours.html'
r = requests.get(url)
soup = BS(r.content, "lxml")

for i in soup.find_all('p', class_='mol-para-with-font'):
    print(i.text)

Answer 5

给所有div一个像skills这样的公共类然后用500毫秒的延迟调用它们.each。

jQuery函数应该如下所示：

$('.skills').each(function(){
   setTimeout( $(this).removeClass('skill-rank-inactive'),500);
)}

在document.ready()或事件上调用此函数。

如何在JQuery中向html元素添加类之间添加延迟？

5 个答案: