Question

在Safari中使用Webkit的CSS3;我有一个按钮，当点击时，会导致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事件。

如果我使用这些块，那么它会在没有动画的情况下打开/关闭。

如果我使用显示样式，那么它有效但不会立即显示动画，只会触发页面中的某个其他事件，例如页面上其他位置的其他按钮。

我想可能会将“pointer-events：none”添加到弹出div隐藏后使用的样式中，但我要求的内容似乎是你经常遇到的不透明度所以它必须是一个半常见的问题。

思想？

Answer 1

针对您遇到的问题的一个干净的（呃？）解决方案 - 这对于具有'淡入'效果的工具提示和模态弹出窗口等常见问题 - 不仅要在不透明度之间转换，还要在“不透明度”之间进行转换。能见度“财产。与'display'不同，'visibility'是一个实际的可动画属性，它会做正确的事情，因为它只在转换开始之前使元素不可见（并且对输入事件没有响应），并且只有在转换返回到初始状态。

之前给出的答案确实有效，但依靠JavaScript来操纵可能不太理想的属性。通过纯CSS完成所有这些操作，除了在需要显示的元素上设置和取消设置类之外，您的JavaScript除此之外什么都不做。如果您正在创建工具提示，则可以通过使工具提示成为子元素并在父级上使用“悬停”伪选择器来完成，而无需任何JS。

因此，对于通过点击某些内容触发的弹出窗口，您可以像这样设置样式：

#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/

Answer 2

如果您将div设置为不透明度为零，那么您仍然可以与“隐身”项目进行互动。您想要将其设置为display:none。您可以同时执行这两项操作，允许div淡出为零，然后在动画结束时添加display:none。

Answer 3

您可以执行的操作是在不透明度设置为0时使用以下样式禁用按钮：

pointer-events: none;
cursor: default;

这样它们就不会被点击，当光标悬停在按钮所在位置时光标不会改变。我需要一个仅限CSS的解决方案，这对我有用。

具有不透明度的CSS3元素：0（不可见）响应鼠标事件

3 个答案: