3

我似乎发现了 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 属性，以便在悬停之前无法与之交互。

有任何想法吗？

奇妙

4

4 回答 4

4

您可以尝试将溢出：隐藏在a上，这样跨度应该看起来不可见，而无需使用显示：无；因为您已将其向上移动了 10 像素。

或代替显示：无；尝试使用可见性：隐藏；

于 2011-09-07T14:10:00.467 回答
3

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

具体来说，我将使用您使用 JS 添加或删除的 style="display:none" 的内联样式属性，并将 display:none 从样式表中取出。

然后，在 JS 中，在删除 display:none 之后（显式地或通过 :hover 伪类的样式规则），使用显式添加/删除类的 setTimeout 函数。这样，“这是显示：内联”更改是您希望应用过渡规则的其他样式属性更改的离散的、较早的可绘制操作。

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

于 2013-05-24T18:12:40.933 回答
0

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

IE。

.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;
}
于 2013-05-08T20:00:15.060 回答
0

我会和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');
                }
    });

});

于 2013-08-27T14:33:27.043 回答