Хотя это один из способов сделать это, я столкнулся с некоторыми странными ошибками Safari при использовании его во всплывающем окне с элементом видео внутри, лучше использовать анимацию параметра видимости, которая, кажется, лучше работает во всех современных браузерах.
с использованием Webkit в Safari; У меня есть кнопка, которая, при нажатии, вызывает появление div. Этот div - просто большой заполненный прямоугольник, и в нем есть несколько кнопок, одна из которых вызывает тот же div для исчезновения.
Проблема заключается в следующем: когда элемент исчезает (непрозрачность: 0), и я нажимаю, где была одна из кнопок, onClick все еще срабатывает. Другими словами, даже если кнопка не видна (непрозрачность: 0), она все еще там и является частью модели события. Я не хочу этого
Кнопки вызывают следующие функции:
// This displays the overlay (popup)
function showCategoryPopup() {
// Was playing with the following, but with no success.
// popupCategory.style.display = "block";
// popupCategory.style.visibility = "visible";
// Change the attributes that will be animated.
popupCategory.style.opacity = 1;
popupCategory.style.webkitTransform = "scale(1.0)";
}
function hideCategoryPopup() {
// Change the animated attributes
popupCategory.style.opacity = 0;
popupCategory.style.webkitTransform = "scale(0.7)";
// Even if opacity is 0, we still get mouse events. So, make it hidden?
// popupCategory.style.visibility = "hidden";
// popupCategory.style.display = "none";
}
Класс CSS для наложения выглядит так:
.popupContainer {
opacity: 0;
-webkit-transform: scale(0.7);
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: initial;
}
Если я вообще не использую настройки видимости или отображения, анимация в порядке, но события mouseClick запускаются для невидимых элементов.
Если я использую блоки, то он включает / выключает без анимации.
Если я использую стиль отображения, то он вроде работает, но вместо немедленного отображения анимации он срабатывает только после запуска какого-либо другого события на странице, например другой кнопки в другом месте на странице.
Я подумал, может быть, добавить «указатель-события: нет» к стилю, используемому всплывающим дивом после того, как он скрыт, но то, что я прошу, похоже на то, что вы часто сталкиваетесь с непрозрачностью, поэтому это должно быть полу частая проблема.
Мысли?