Переходная видимость / непрозрачность w / in JS

Question

У меня есть окно предупреждения, которое я хочу использовать 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>

Answer 1

Вы на правильном пути. Вместо того, чтобы прослушивать щелчок по предупреждению, используйте кнопку, поскольку я предполагаю, что она есть по этой причине. При нажатии на кнопку класс .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);
  });

});

Answer 2

Этот ответ очень полезен для этого вопроса SO под названием CSS3 Transition - эффект затухания , который отмечает

При отображении элемента (путем переключения на видимый класс) мы хотим visibility: видимый, чтобы сразу же включиться, так что можно передавать только свойство opacity. И когда мы скрываем элемент (переключаясь на скрытый класс), мы хотим отложить объявление visibility: hidden, чтобы мы могли сначала увидеть переход с затуханием. Мы делаем это путем объявления перехода к свойству видимости с длительностью 0 с и задержкой.

Я решил не отмечать этот вопрос как дубликат, поскольку он также включает событие 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>

Удачи!