在 JS 中转换可见性/不透明度答案

【问题标题】：Transitioning Visibility/Opacity w/in JS在 JS 中转换可见性/不透明度
【发布时间】：2020-06-10 20:05:35
【问题描述】：

我有一个警告框，我想使用 sessionStorage 以便它只出现一次。当用户单击关闭警报时，我希望该框消失（显示：无）但淡出。

我了解到您必须使用两种不同的功能 - 一种在单击时激活并开始转换，另一种在转换后添加“显示”样式。但是，我无法让它工作：

<style>

    .ddAlert {
        padding: 20px;
        box-sizing: border-box;
        background-color: #f0ad4e;
        color: #fff;
        opacity: 1;
        transition: opacity 1s;
    }

    .hide {
        opacity: 0;
        display: none;
    }

</style>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        let dismissed = sessionStorage.getItem("dismissed");
        let alertDiv = document.getElementById("alert");
        let dismissButton = document.getElementById("dismiss");
        if (!dismissed) {
            alertDiv.classList.remove("hide");
        }

        alertDiv.addEventListener("click", function() {
            this.style.display = "block";
        }.bind(alertDiv));

        alertDiv.addEventListener("transitionend", function() {
            if (this.className == "hide") {
                this.style.display = "none";
            }
            sessionStorage.setItem("dismissed", true);
        }.bind(alertDiv));
    });

</script>

<div class="ddAlert hide" id="alert">
    SOME ANNOYING ALERT HERE!
    <button type="button" id="dismiss">X</button>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

这个答案极大地借鉴了这个标题为CSS3 Transition - Fade out effect的SO问题，其中注释

当显示元素时（通过切换到可见类），我们想要可见性：可见立即启动，因此可以过渡只有不透明度属性。并且在隐藏元素时（通过切换到隐藏类），我们要延迟可见性：隐藏声明，这样我们就可以先看到淡出过渡。是通过在可见性属性上声明转换来做到这一点， 0s 持续时间和延迟。

我选择不将此问题标记为重复问题，因为它还涉及transitionend 事件。此外，我只关注了过渡的本质，并用了最少的插图。

关键元素是.dismissed-saved 类。

let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");

dismissButton.addEventListener("click", function() {
  // kick in the transition      
  alertDiv.classList.add("dismissed-saved");
  // *this is where state should be committed
});

alertDiv.addEventListener("transitionend", function({
  target
}) {
  if (target === alertDiv) {
    // clean up and show a nifty text message illustrating the event handler.
    target.classList.add("hidden");
    target.classList.remove("dismissed-saved");
    document.getElementById("dismissed").classList.remove('hidden');
  }
});

.ddAlert {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f0ad4e;
  color: #fff;
  opacity: 1;
}

.hidden {
  display: none;
}

.dismissed-saved {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<div class="ddAlert" id="alert">
  SOME ANNOYING ALERT HERE!
  <button type="button" id="dismiss">X</button>
</div>
<div id="dismissed" class="hidden">
  Dismissed!
</div>

祝你好运！

【讨论】：

【解决方案2】：

你在正确的轨道上。不要听点击警报，而是使用按钮，因为我认为它是出于这个原因。单击按钮时，应将.hide 类添加到警报中。这将开始从opacity: 1; 到opacity: 0; 的转换。

我建议不要使用 inline-styles，而是坚持使用类。内联样式很难被覆盖，并且会阻止您利用 CSS 的全部功能。所以我在那里添加了一些课程来帮助你。

试试下面的例子。

<div class="ddAlert hidden" id="alert">
    SOME ANNOYING ALERT HERE!
    <button type="button" id="dismiss">X</button>
</div>

.ddAlert {
  display: block;
  transition: opacity 1s;
}

.hide {
  opacity: 0;
}

.hidden {
  display: none;
}

document.addEventListener("DOMContentLoaded", function() {
  let dismissed = sessionStorage.getItem("dismissed");
  let alertDiv = document.getElementById("alert");
  let dismissButton = document.getElementById("dismiss");

  if (!dismissed) {
    alertDiv.classList.remove("hidden");
  }

  dismissButton.addEventListener("click", function() {
    alertDiv.classList.add("hide");
  });

  alertDiv.addEventListener("transitionend", function({ target }) {
    if (target.classList.contains("hide")) {
      target.classList.add("hidden");
    }
    sessionStorage.setItem("dismissed", true);
  });

});

【讨论】：