使用CSS和JavaScript逐渐褪色

Question

我对此很新。到目前为止，当我使用CSS单击按钮时，我设法使文本逐渐消失，但是随后样式停留在那里，在单击新按钮时，我无法将其重置为零。我不想使用纯JavaScript进行此操作，因为我想扩展CSS方面。我希望这是有道理的，但是如果有人可以帮助我做到这一点，所以每次点击按钮时，文字都会逐渐消失，那就太神奇了。

更好的是，如果您可以向我展示如何使CSS再次淡出，那将是超级惊人的。非常感谢。

这是指当前工作方式的链接。http://infinitedv.co.uk/test01/experiment01.html

function text1() {
  textbox.style.opacity = 1;
  textbox.style.transition = "opacity 1.6s";
  document.getElementById("textbox").innerHTML =
    "This is a test of My Amazing New Javascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! ";
};
function text2() {
  textbox.style.opacity = 1;
  textbox.style.transition = "opacity 1.6s";
  document.getElementById("textbox").innerHTML = "Even more evidence of my amazing new javascript skills! Would you like to know the time and date? No problem:" + "<br><br>" + Date();
};

#textbox {
  width: 400px;
  opacity: 0;
}
#wrapper {
  margin: auto;
  width: 500px;
}

<div id="wrapper">
  <h1>Will's Amazing javascript experience!</h1>
  <button onclick="text1()" type="Button 1">Button1</button>
  <button onclick="text2()" type="Button 2">Button2</button>
  <br />
  <p id="textbox">Text will Magically appear here!</p>
</div>

Answer 1

您忘了将HTML元素的不透明度重置为0。以下示例使用CSS类animatee，该类别添加到元素中时会淡入某些内容。首先单击该按钮时，将删除animatee（因此它使其透明），然后在会触发过渡的超时中再次添加。

        function text1() {
          document.getElementById("textbox").className = "";
          document.getElementById("textbox").innerHTML =
            "This is a test of My Amazing New Javascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! ";
          setTimeout(function() {
            document.getElementById("textbox").classList.add("animatee");
          }, 300);
        };
        function text2() {
          document.getElementById("textbox").className = "";
          document.getElementById("textbox").innerHTML = "Even more evidence of my amazing new javascript skills! Would you like to know the time and date? No problem:" + "<br><br>" + Date();
          setTimeout(function() {
            document.getElementById("textbox").classList.add("animatee");
          }, 300);
        };

     #textbox {
       width: 400px;
       opacity: 0;
     }
     #wrapper {
       margin: auto;
       width: 500px;
     }
     .animatee {
       opacity: 1 !important;
       transition: opacity 1.6s ease 0s;
     }

<div id="wrapper">
  <h1>Will's Amazing javascript experience!</h1>
  <button onclick="text1()" type="Button 1">Button1</button>
  <button onclick="text2()" type="Button 2">Button2</button>
  <br />
  <p id="textbox">Text will Magically appear here!</p>
</div>

Answer 2

您在这里最好的选择而不纯粹使用JavaScript是包括jQuery库，将其添加到代码顶部：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>

然后，您可以使用JQuery提供的.animate()功能直接更改所需的任何选择器的不透明度属性。还有.fadeIn()，.fadeOut()和.fadeToggle()功能，但这并不能像您想要的那样直接访问CSS属性。这是如何使用.animate()在一段时间内切换不透明度的一个示例：

这将不透明度淡入400毫秒超过400毫秒： $('#my-selector').animate({opacity: 0},400);

这将不透明度淡入100毫秒超过400毫秒： $('#my-selector').animate({opacity: 100},400);

.animate()文档：http：//api.jquery.com/animate/淡入文档：https：//api.jquery.com/category/effects/fading/

jQuery是专业开发中最容易使用和最流行的JavaScript库。