CSS 和 JavaScript 动画

Question

我有这个 HTML/JavaScript 页面需要一点帮助。当 JavaScript 在浏览器中启用时，它工作得很好，但是，当浏览器 JavaScript 被禁用时，只有第一个 div 实际显示。有没有办法更改 CSS/JavaScript 以便浏览器在禁用 JavaScript 时显示所有没有动画的 div？

我想要它做什么：

启用 JavaScript 后，它会在用户滚动时显示和删除 div（现在就是这样）

当 JavaScript 被禁用时，所有 div 将只显示在页面上，没有动画。

HTML

<div class="M1">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M2">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M3">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M4">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>

CSS

.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

JavaScript

$(document).on("scroll", function() {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + $(window).height();
  var tags = $(".tag");

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i];

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  }
});

抱歉，如果这是一个简单的问题，但我对 JavaScript 比较陌生，无法按照我想要的方式使用 CSS。

此外，我知道有一种方法可以进行代码预览（在代码底部有“运行代码”蓝色按钮的地方），但我找不到使用它的方法.也将不胜感激。

Answer 1

我认为您需要找到一种方法来更改显示可见性，例如 style.display ="none" 而不是使用不透明度：0；在 css.

而不是默认的不透明度 0；保持默认可见，然后用JS把所有带有class="tag"的元素变成style.display = "none";

我的代码可能不会工作，因为我不熟悉 jquery，但这只是一个想法，你可以实现它。

css

   .tag {
         display: block;
        } 


    if ($(tag).position().top < pageBottom) {
      $(tag).style.display = "block";
    } else {
      $(tag).style.display = "none";
    }

希望对您有所帮助。

Answer 2

var tags = $(".tag");

$(document).on("scroll", function(event){scroll(event)});

scroll = function(e) {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + $(window).height();

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i];

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  }
}

scroll()

tags.removeClass("visible")

.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="M1">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>
          Some Text<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
        </p>
    </div>
</div>
<div class="tag M2 visible">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M3 visible">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>
          Some Text<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
        </p>
    </div>
</div>
<div class="tag M4 visible">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>
          Some Text<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
        </p>
    </div>
</div>

要实现如果 JS 关闭，所有部分都是可见的，这些部分以可见标签开始，但 JS 会立即删除它们。这样，如果 JS 被禁用，所有部分都是可见的。

CSS 和 JavaScript 动画

CSS and JavaScript Animation

html

javascript

css

animation