Хотя это один из способов сделать это, я столкнулся с некоторыми странными ошибками 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 запускаются для невидимых элементов.

Если я использую блоки, то он включает / выключает без анимации.

Если я использую стиль отображения, то он вроде работает, но вместо немедленного отображения анимации он срабатывает только после запуска какого-либо другого события на странице, например другой кнопки в другом месте на странице.

Я подумал, может быть, добавить «указатель-события: нет» к стилю, используемому всплывающим дивом после того, как он скрыт, но то, что я прошу, похоже на то, что вы часто сталкиваетесь с непрозрачностью, поэтому это должно быть полу частая проблема.

Мысли?

Ответы на вопрос(3)

Ваш ответ на вопрос