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

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，所有部分都可见。

Answer 2

我认为您需要找到一种方法来更改显示可见性，例如 style.display ="none" 而不是使用 opacity: 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";
    }

希望对您有所帮助。