如何实现按钮重新显示经CSS动画自动隐藏的div？

原生JavaScript 实现 #

先准备好HTML结构：

<div class="env">需要控制显示/隐藏的内容</div>
<button id="showBtn">重新显示</button>

然后编写JS逻辑：

// 获取元素
const showBtn = document.getElementById('showBtn');
const envDiv = document.querySelector('.env');

// 绑定点击事件
showBtn.addEventListener('click', () => {
  // 移除动画类，清除动画保留的状态
  envDiv.classList.remove('env');
  // 强制浏览器重绘，避免样式不更新
  void envDiv.offsetWidth;
  // 让div可见
  envDiv.style.visibility = 'visible';
  // 如果需要点击后再次6秒自动隐藏，就重新添加动画类
  envDiv.classList.add('env');
});

如果点击后只需要显示，不需要再次自动隐藏，代码可以简化：

showBtn.addEventListener('click', () => {
  envDiv.style.visibility = 'visible';
  // 取消动画，阻止后续自动隐藏
  envDiv.style.animation = 'none';
});

jQuery 实现 #

同样的HTML结构，用jQuery写的逻辑：

$('#showBtn').click(function() {
  const $env = $('.env');
  // 移除动画类
  $env.removeClass('env');
  // 触发重绘
  $env.hide().show(0);
  // 设置可见
  $env.css('visibility', 'visible');
  // 需要再次自动隐藏的话，重新添加类
  $env.addClass('env');
});

简化版（仅显示，不再次自动隐藏）：

$('#showBtn').click(function() {
  $('.env').css({
    'visibility': 'visible',
    'animation': 'none'
  });
});

原理说明 #

你的CSS里设置了animation-fill-mode: forwards，这会让动画结束后元素保持最后一帧（visibility: hidden）的状态。所以要重新显示，必须先清除这个动画状态，再设置可见性；如果需要再次触发自动隐藏，就得重新绑定动画类。

内容的提问来源于stack exchange，提问作者MickaelCA7