Question

我有一个简单的脚本，通过将显示更改为＆＃34; none＆＃34;来隐藏和显示网站上的某些元素。或＆＃34;阻止＆＃34;。我希望它是动画的，这意味着元素会慢慢消失。我对javascript很新，我知道有setTimeout和setInterval，但我不知道如何使用它。我怎样才能动画＆＃34;这个功能？这是我的代码：

var rysunki = document.querySelectorAll(".rysunek");
var projekty = document.querySelectorAll(".projekt");
var btnAll = document.getElementById("allItems");
var btnProjekty = document.getElementById("projects");
var btnRysunki = document.getElementById("drawings");

function removeDrawings() {
    var i;
    for (i = 0; i < rysunki.length; i++) {
    rysunki[i].style.display = "none";
    };
};
function showDrawings(){
    var i;
    for (i = 0; i < rysunki.length; i++) {
    rysunki[i].style.display = "block";
    };
};
function removeProjects() {
    var i;
    for (i = 0; i < projekty.length; i++) {
    projekty[i].style.display = "none";
    };
};
function showProjects() {
    var i;
    for (i = 0; i < projekty.length; i++) {
    projekty[i].style.display = "block";
    };
};
function showAll() {
    showProjects();
    showDrawings();
}

btnProjekty.addEventListener("click", function(){
    showProjects();
    removeDrawings();
});
btnRysunki.addEventListener("click", function(){
    removeProjects();
    showDrawings();
});
btnAll.addEventListener("click", showAll);

甚至可能吗？我应该添加一些我隐藏的元素的不透明度吗？

请不要jQuery，只有Vanilla JS。

编辑：根据要求，这是HTML。基本上有两个不同的元素：

<figure class="projects-panel__item col-md-3 projekt">
    <a href="img/projekty/1.jpg" data-lightbox="gallery" data-title=""><img src="img/1.jpg" alt="" /></a>
</figure>
<figure class="projects-panel__item col-md-3 rysunek">
    <a href="img/1.jpg" data-lightbox="gallery" data-title=""><img src="img/1.jpg" alt="" /></a>
</figure>

Answer 1

下面是一个简单的例子，介绍如何使用JS和CSS混合。

在JS中，我只是在更改容器类，以响应按钮单击。

在CSS中，我在 .projects 和 .drawings 中定义了过渡：不透明度（这就是设置动画的方式） p>

我还添加了两个类，它们将修改上述两个类的不透明度值。

如果您不理解某事，请随时提问。

const container = document.querySelector('#container')

const showDrawings = () => {
  container.classList.remove('showProjects')
  container.classList.add('showDrawings')
}

const showProjects = () => {
  container.classList.remove('showDrawings')
  container.classList.add('showProjects')
}

const showAll = () => {
  container.classList.add('showDrawings')
  container.classList.add('showProjects')
}

document.querySelector('#drawingsButton').addEventListener('click', showDrawings)

document.querySelector('#projectsButton').addEventListener('click', showProjects)

document.querySelector('#allButton').addEventListener('click', showAll)

.drawings,
.projects {
  display: inline-block;

  width: 200px;
  height: 200px;

  opacity: 0;

  transition: opacity .3s .1s;
}

.drawings {
  background: red;
}

.projects {
  background: blue;
}

.showDrawings .drawings {
  opacity: 1;
}

.showProjects .projects {
  opacity: 1;
}

<div id="container">
  <div class="drawings"></div>
  <div class="projects"></div>
</div>
<button id="drawingsButton">Drawings</button>
<button id="projectsButton">Projects</button>
<button id="allButton">All</button>

在更改元素显示的javascript中设置timeOut

1 个答案: