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

это отключить кнопку, когда прозрачность установлена ​​на 0 со следующими стилями:

pointer-events: none;
cursor: default;

Таким образом, они не кликабельны, и курсор не меняется, когда он находится над кнопкой. Мне нужно решение только для CSS, и это сработало для меня.

 Larzan26 авг. 2018 г., 22:36
Хотя это один из способов сделать это, я столкнулся с некоторыми странными ошибками Safari при использовании его во всплывающем окне с элементом видео внутри, лучше использовать анимацию параметра видимости, которая, кажется, лучше работает во всех современных браузерах.
Решение Вопроса

div чтобы иметь непрозрачность ноль, вы все равно сможете взаимодействовать с «невидимым» элементом. Вы хотите установить егоdisplay:none вместо. Вы могли бы сделать оба, позволяяdiv исчезнуть до нуля, а затем нажать наdisplay:none когда анимация закончилась.

 Michael Irigoyen13 янв. 2011 г., 04:38
@Woodster Я мог бы порекомендовать вам использовать jQuery для чего-то подобного. Встроенные анимационные эффекты (вродеfadeOut) просты в использовании.fadeOut постепенно исчезает, а затем устанавливает егоdisplay:none из коробки.
 Dennis Kreminsky13 янв. 2011 г., 02:39
Правда. Вы должны думать о непрозрачности: 0 элемент, как если бы он был сделан из стекла :)
 Woodster20 янв. 2011 г., 16:34
Обновление: jQuery был отличным решением этой проблемы. Так. Многое. Полегче. Проголосовали-Up.
 joanwolk09 янв. 2012 г., 12:23
display не поддерживается для CSS-переходов, и изменение свойства отображения вызовет эффект переключения вместо эффекта перехода.visibility это то, с чем вы хотите работать.
 Woodster13 янв. 2011 г., 04:35
Display: none // display: block решает проблему с помощью щелчка мышью, но затем прозрачность не изменяется от 1 до 0. Div просто включается и выключается. Это было проблемой с атрибутом display :. Я попытался установить отображение: нет до и после установки непрозрачности: 0, но я считаю (?) Результаты функции применяются в массовом порядке после вызова функции, и это дает чистый результат исчезновения блока вместо исчезает Есть ли что-то еще, что мне нужно сделать, чтобы он устанавливал блок после завершения анимации непрозрачности?

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

Предыдущий ответ работает, но зависит от JavaScript для управления свойствами, которые могут быть менее желательны. Сделав все это с помощью чистого CSS, ваш JavaScript не должен делать ничего, кроме как устанавливать и сбрасывать класс для элемента, который должен быть показан. Если вы создаете всплывающую подсказку, ее можно сделать вообще без JS, сделав подсказку дочерним элементом и используя псевдо-селектор hover на родительском элементе.

Таким образом, для всплывающего окна, вызываемого нажатием на что-либо, вы должны оформить его так:

#popup
{
  /* ...cosmetic styling, positioning etc... */

  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;

  opacity: 0;
  visibility: hidden;
}

#popup.shown
{
  opacity: 1;
  visibility: visible;
}

Тогда ваш JavaScript может просто переключать «показанный» класс.

Живой пример:http://jsfiddle.net/y33cR/2/

 Kuba Wyrostek22 апр. 2015 г., 20:41
Это должен быть принят ответ ИМХО.
 aaaaaa03 июн. 2018 г., 04:48
Я ценю непрозрачность в коде. Исходя из формулировки ответа, я понял, что это означает, что я могу анимировать только видимость, и она будет делать то, что вы ожидаете.
 George Dimitriadis27 июн. 2017 г., 15:08
Хорошее использование видимости, спасибо, я не знал, что скрытые элементами видимости не вызывают события.
 Beni Cherniavsky-Paskin25 мая 2015 г., 14:47
Это здорово.taccgl.org/blog/... хорошо объясняет семантику перехода видимости.greywyvern.com/?post=337 идет в мельчайших деталях (но чрезмерно усложняет использование задержки перехода).

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