当不透明度为0％时，从元素中删除单击

Question

我在页面上有一些内容需要淡入0％不透明度而不是淡出并且元素完全从页面中删除，因此元素的高度和宽度仍然存在但只是不活动。

问题是，该元素中的对象仍然可以点击并仍然触发事件。是否有一种特殊方式可以使它们处于非活动状态，或者只是cursor:default;和preventDefault();？

Answer 1

尝试更改内容的可见性。

在css中，

visibility: hidden

这将隐藏元素，但仍将占据与完全显示时相同的宽度和高度。

更好的是，您可以淡出元素，然后更改其可见性：

$('#target').animate({
      opacity: 0
    },
    1000, // specifies duration of fade (in milliseconds)
    function() {
        // this function will called after the opacity animation has completed
        $(this).css('visibility', 'hidden');
    }
);

Answer 2

对我来说，它就是这样的：

.dropdown-menu {
    transition: all .32s ease;
    opacity: 0;
    display: block;
    visibility: hidden;
}

.show {
    visibility: visible;
    opacity: 1;
}