javascript - javascript onclick css每次都会淡入，而不仅仅是第一次

Question

如何在每次点击时让文本淡入，而不仅仅是第一次使用 css 过渡和 JavaScript？

这是我到目前为止所拥有的

<style>
#data {
    transition: .7s;
}
</style>

<h1 id="data"></h1>
<a href="#" id="clicker">click 1</a>

document.getElementById('data').style.opacity = 0;
function go(event){
    event.preventDefault();
    document.getElementById('data').style.opacity = 1;
    document.getElementById('data').innerHTML = 'test';
}
document.getElementById('clicker').addEventListener('click', go);

标签： javascripthtml

Answer 1

也可以使用Element.animate()来完成：

const dataElement = document.getElementById('data')
dataElement.style.opacity = 0

function go(event) {
  event.preventDefault()
  dataElement.animate({
    opacity: [0, 1]
  }, 700).onfinish = () => dataElement.style.opacity = 1
}
document.getElementById('clicker').addEventListener('click', go)

<h1 class="fade-in" id="data">test</h1>
<a href="#" id="clicker">click 1</a>

编辑： 在上面的代码片段中，onfinish事件处理程序用于维护最终的不透明度值，因为它在动画结束后被设置回 0。但我发现这也可以通过fill: 'forwards'在关键帧选项中设置来实现：

const dataElement = document.getElementById('data')
dataElement.style.opacity = 0

function go(event) {
  event.preventDefault()
  dataElement.animate({
    opacity: [0, 1]
  }, {
    duration: 700,
    fill: 'forwards'
  })
}
document.getElementById('clicker').addEventListener('click', go)

<h1 class="fade-in" id="data">test</h1>
<a href="#" id="clicker">click 1</a>

此外，您可能希望在实施这些方法之前检查浏览器兼容性

如果你想要一个更安全的方法，你可以使用 css 动画：

const data = document.getElementById('data')
data.style.opacity = 0
const clicker = document.getElementById('clicker')
clicker.addEventListener('click', () => {
  data.classList.remove('fade-in')
  data.offsetWidth // required to trigger a reflow and restart the animation
  data.classList.add('fade-in')
})

.fade-in {
  animation-name: fadein-animation;
  animation-duration: 700ms;
  animation-fill-mode: forwards;
}

@keyframes fadein-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<h1 id="data">test</h1>
<a href="#" id="clicker">click 1</a>