Question

我似乎发现了CSS3过渡的缺陷。希望不是。这就是困境。

.element a span {
   display:none;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   display:inline;
   opacity:0.8;
   position:absolute;
   top:10px;
}

过渡根本不像这样。如果删除了display：none属性，那么它确实有效，但是在这种情况下我们需要在链接上使用display：none属性，以便在悬停之前不能与它接口。

有什么想法吗？

非凡

Answer 1

你可以尝试把溢出：隐藏在a上，这样跨度应该看起来不可见，而不需要使用display：none;因为你把它移动了10px。

或代替display：none;尝试使用visibility：hidden;

Answer 2

更改display：none to display：inline使其他属性在转换方面没有实际意义。因此，使用setTimeout将display：none / display：block更改与类更改分开。浏览器需要将它们视为单独的更改才能应用您的转换。可悲的是，我认为这意味着你不能只使用：悬停，但在悬停时需要一个JS事件处理程序。

具体来说，我会使用你用JS添加或删除的style =“display：none”的内联样式属性，并从样式表中取出display：none。

然后，在JS中，在删除display：none（显式或通过：hover pseudoclass的样式规则）之后，使用显式添加/删除该类的setTimeout函数。这样，“this is display：inline”更改是您希望应用转换规则的其他样式属性更改的离散，早期可绘制操作。

在相反的方向上，在事件处理程序中更改类，并使用setTimeout函数将display：none设置为内联样式。超时将需要匹配当然的转换持续时间（以便显示：在转换完成后没有发生）。

Answer 3

或者你可以尝试使用宽度或高度0结合隐藏在隐形元素上的溢出，这样它就不会干扰任何其他元素，同时保留过渡。

即

.element a span {
   overflow: hidden;
   height: 0;
   width: 0;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   overflow: visible;
   height: ???px;
   width: ???px;
   opacity:0.8;
   position:absolute;
   top:10px;
}

Answer 4

我会选择JS。 CSS转换高度苛刻。以下是我用来制作点击扩展功能的内容，您可以更改一些内容并在悬停时执行相同的操作

// Dropdown

$（函数（）{

    // Target the ul sibling to keep it generic
    var selector = $('.dropdown article > ul').siblings().addClass('selector');

    selector.click(function(){
                var targetUl = $(this).siblings('ul');

                if (targetUl.hasClass('open')) {
                            targetUl.removeClass('open').slideUp();
                } else {
                            targetUl.slideDown().addClass('open');
                }
    });

}）;

使用display：none时禁用CSS3过渡

4 个答案: