Question

我已阅读其他主题，例如this和this，但不是我的情况。

我有这个CSS代码段：

.evaluation .background_bar .full_background_bar{
display: block;
height: 12px;
animation: loadbar 2s 200;
-webkit-animation: loadbar 2s 200 ease-out forwards;
}

@keyframes loadbar {

  from {
    width: 0;
  }

}
@-webkit-keyframes loadbar {

  from {
    width: 0;
  }

}

我想在页面向下滚动到评估块时激活它。在我的情况下，我使用dinamic div style="width:"代码添加宽度，因此我无法添加此内容（来自我链接的示例）：

<div class="level eighty">80%</div>

因为宽度不是标准的（特定于帖子的custom field）。我正在尝试解决这个片段：

<script>
function isElementInViewport(elem) {
    var $elem = $(elem);

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

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

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

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.full_background_bar');

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

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

</script>

在CSS中，我添加了一个包含动画设置的开始类（我从full_background_bar中删除），但不起作用。

编辑：

我解决了问题，代码和动画在小提琴中起作用。但是当我把所有内容放在我的主题中时，都行不通。问题是javascript：我怎么放这个片段？我试过页眉和页脚。

谢谢

当内容进入视图时激活动画栏

0 个答案: