javascript - 给标题下划线css动画

Question

我在页面上有一些 div 标签，一旦它们出现在视口(viewport)中，我希望它们以某种方式进行动画处理。我已经得到了使用 waypoint.js 的“视口(viewport)中”部分，所以现在我被动画困住了。

基本上，我希望始终在所有 h1 标签上添加灰色下划线。一旦他们进入视野，我想要一条黑线从右到左在那条灰线的顶部运行，然后几乎离开场景，停在大约灰线的 25% 处。

为了演示它，我将效果更改为在 hover 上工作，如您所见，当它穿过灰线时，我得到了该部分，但我坚持使用应该离开场景的部分(几乎离开场景——停在灰线的25%处):

HTML:

<div class="section-header">
  <span>Hello</span>
</div>

CSS:

.section-header {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2em;
    letter-spacing: 5px;
    position: relative;
    text-align: center;

    > span {
        display: inline-block;
        position: relative;
        border-bottom: 1px solid #ccc;
        &:before {
            content: "";
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -1px;
            right: 0;

            background-color: #000;
            visibility: hidden;
            -webkit-transition: all 0.9s ease-in-out 0s;
            transition: all 0.9s ease-in-out 0s;
        }
        &:hover {
            &:before {
                visibility: visible;
                width: 100%;
            }
        }
    }

}

http://codepen.io/anon/pen/RWoxBv

这在 CSS 中完全可行吗？或者我应该使用 Javascript 吗？

为了进一步演示动画，假设这是黑线:

           - (starts from right hand side and goes to left)
          --
         ---
        ----
       -----
      ------
     -------
    --------
   ---------
  ----------
 -----------
------------ (point when it covers the grey line and starts to 'leave the scene') 
-----------
----------
---------
--------
-------
------
-----
----
--- (stopping there)

Answer 1

因此，为元素设置动画，从 left 100% 到 left -75%(= 25% 可见!)
jsBin demo playground

这是一个很好的小例子，它使用了 small jQuery plugin taken from here 和一些标准的 CSS:

/**
 * inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
 *
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 * The max returned value is the element height + borders)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el) {
      function visPx(){
        var elH = $(el).outerHeight(),
            H = $(win).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));  
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));



// Let's rock!
$("h1 span").inViewport(function(px){
  $(this).toggleClass("animateLine", !!px);
});

p{height:900px;}/*FOR DEMO ONLY*/

h1{
  text-align:center;
}
h1 span{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
h1 span:after,
h1 span:before{
  content:"";
  height:1px;
  width:100%;
  position:absolute;
  bottom:0px;
  left:0;
  transition: 3s;
}
h1 span:before{
  background:#ccc;
}
/* We'll animate this one to -75% */
h1 span:after{ 
  background:#000;
  left:100%;
}
h1 span.animateLine:after{
  left: -75%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>This is title 1</span></h1>
<p>1 Scroll down to find more titles</p>
<h1><span>This is title 2</span></h1>
<p>2 Scroll down to find more titles</p>
<h1><span>This is title 3</span></h1>
<p>3 Scroll down to find more titles</p>
<h1><span>This is title 4</span></h1>
<p>4 Scroll down to find more titles</p>
<h1><span>This is title 5</span></h1>
<p>5 Scroll down to find more titles</p>

基本上将伪 :after 设置为初始 100% 左侧，并触发 CSS3 类，该类将使用演示中的 jQ 插件应用左侧 -75% 过渡。

https://stackoverflow.com/a/26831113/383904
CSS3-Animate elements if visible in viewport (Page Scroll)