javascript - 我已经在滚动上制作了动画，但是我想要应用的样式阻止了它的工作

Question

我从几个来源中删除了以下内容，我想为滚动上突出显示的文本设置动画。但我希望它看起来像这样:

Heading

我有一些 CSS 可以做到这一点，但它会停止动画工作，我希望这个动画在我的网站上针对各种标题工作，不能 100% 确定这里的代码是否会这样做!

HTML

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
<div id = "spacer"></div>
  <div class='boostheadings'><h2>TAKE NOTE, MAKE <span class="onAppear">PROGRESS</span></h2></div>  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>  

CSS

/*.boostheadings {
  font-family: "montserrat";
  font-size: 7vw;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}
*/

.onAppear {
 background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%);
  transform: skew(30deg);
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.visible {
    background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  transition: background-size 1s ease-in;
    background-size: 100% 90%;
    transform: skew(30deg);
}

}

JS

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll(".onAppear"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add("visible");
    } else {
      elem.classList.remove("visible");
    }
  });
}, false);

https://codepen.io/anon/pen/xYKMbM

Answer 1

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll(".onAppear"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;
    
    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add("visible");
    } else {
      elem.classList.remove("visible");
    }
  });
}, false);

.boostheadings {
  font-family: "montserrat";
}

.skewed {
  display: inline-block;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

.onAppear {
  background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.visible {
  background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  transition: background-size 1s ease-in;
  background-size: 100% 90%;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
    <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
    <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
    <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
    <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
    <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <div id = "spacer"></div>
  
  <div class='boostheadings'>
    <h2>
      <span class="skewed">TAKE NOTE, MAKE</span>
      <span class="onAppear skewed">PROGRESS</span>
    </h2>
  </div>  
  
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>  

在这段代码中，我没有浏览其余的代码，只是浏览了阻止动画的部分。

为了确保其正常工作，您可以将 h2 标记内的元素倾斜为单独的元素，而不是整个 .boostheadings div。

所以在你的情况下，2个span元素应该是倾斜的(我将句子的第一部分包裹在span中，就在带动画的span之前)，它不能转换为内联元素，所以我给了它们类“skewed”，然后在css中给出了它们显示:内联 block 和倾斜变换。