元素在視口中時添加類的問題

Question

我正在使用Stick-Kit在滾動時將一些圖像保持在適當的位置，它似乎正在影響另一個腳本，該腳本通過在div進入視口時向div添加一個類來啟動CSS動畫。 我假設Sticky-Kit腳本正在“重置”另一個腳本，因為動畫僅在刪除Sticky-Kit時才發生一次。 當動畫div到達屏幕頂部時，該問題可見。 如何確保動畫僅出現一次（動畫首次出現在視口中）？

http://codepen.io/SeanLindsay1/pen/ZBVyLZ

的HTML

<div id="bg">
  <h2 class="header-title"><span>HEADER</span></h2>

  <div id="pic1">
   1
  </div>

  <div id="pic2">
   2
  </div>

  <div id="pic3">
   3
  </div>

</div>

的CSS

/* STICKY-KIT */
#bg {
    background-color: white;
    width:100%;
    height:1500px;
    padding:0;
    margin:0;
  font-size:30px
}


#pic1 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:blue;
}

#pic2 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:green;
}

#pic3 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:red;
}

/* HEADER TITLES */

.header-title span {
  display: inline-block;
  position: relative;  
}

.change:after {
  content: " ";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #bebebe;
  -webkit-animation: extend .1s 1 forwards;
  animation: extend 1s 1 forwards;
  margin-left: 4px;
  top: 1.2em !important;
}


@-webkit-keyframes extend {
  0% {
    width: 0;
  }
  100% {
    width: 200px;
  }
}
@keyframes extend {
  0% {
    width: 0;
  }
  100% {
    width: 200px;
  }
}

jQuery的

// Check to see if element is in viewport
function isElementInViewport(elem) {
    var $elem = jQuery(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = jQuery(scrollElem).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top ) + 200 ;
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}



// Check if it's time to start the animation
function extendLine() {
    var $elem = jQuery('.header-title span').each(function() {

    var $elem = jQuery(this);

    // If the animation has already been started
    if ($elem.hasClass('change')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('change');
    }

    });

}

// Capture scroll events
jQuery(window).scroll(function(){
    extendLine();
});

$("#bg").stick_in_parent();
$("#text").stick_in_parent({offset_top: 390});
$("#pic1").stick_in_parent();
$("#pic2").stick_in_parent();
$("#pic3").stick_in_parent();

Answer 1

刪除以下代碼行：

$("#bg").stick_in_parent();

確保標題文本塊不受Stick-Kit的影響，並消除了重復執行動畫的問題，如該codepen所示。

我還沒有觀察到由該更改引起的任何不良影響，但是我不能保證沒有任何不良影響，因為我不知道為什么此行出現在原始代碼中。

Answer 2

如果可能的話，可以使用CSS Transition而不是Animation。 它將具有更好的瀏覽器支持，並且可以工作。 我無法真正發現代碼中發生了什么，但是如果您更改了幾行，它將按預期工作。

這是一個分叉的Codepen： http ://codepen.io/ddanielbee/pen/BQbQqj

具體行如下：

.header-title span::after {
  content: " ";
  transition: all 1.5s ease-out;
  width: 0;
}

.header-title span.change::after {

  position: absolute;
  height: 5px;
  border-bottom: 1px solid #bebebe;
  width: 200px;
  margin-left: 4px;
  top: 1.2em !important;
}