【问题标题】:Troubles getting CSS transition to work让 CSS 过渡正常工作的麻烦
【发布时间】:2012-04-04 20:17:39
【问题描述】:

我正在努力理解 CSS3 过渡,但我不确定我的理解是否有问题,或者浏览器是否不合作。

首先,我认为 Opera 应该支持过渡,因为版本 10 左右,但 transition-o-transition 在 11.62 中似乎都没有做任何事情。还是 Opera 使用了不同的语法?

无论如何,我可以通过编写使背景颜色在与大多数其他浏览器一起悬停时淡入淡出

div {transition:background 2s;}
div:hover {background:lime}

到目前为止还可以,我也可以通过编写使背景淡入而不是淡出

div:hover {transition:background 2s; background:lime}

背景会淡出,但不会像这样:

div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}

但我不明白为什么会这样。根据文档,具有0s 持续时间的转换不应该有任何影响,那么为什么最后一个有不同的结果呢?

jsFiddle

【问题讨论】:

    标签: css opera css-transitions


    【解决方案1】:

    我假设您正在寻找的是 ease 计时功能。

    所以你的 CSS 规则应该看起来像这样。

    .class {
        transition: property(ies) duration timing-function;
    }
    
    .class:hover {
        property(ies): new value;
    }
    

    对于 Opera,您必须定义确切的属性。在您的情况下,它不是 background 属性,而是 background-color 属性。

    【讨论】:

    • 双人组回答:jsfiddle.net/rlemon/WZTuM/5 这是@Octavian 正在谈论的一个示例,但对 CSS 进行了很多清理。
    • +1 表示关于 Opera 的评论。这行得通,谢谢!然而,DigitalBiscuits 实际上帮助我解决了我的问题。
    • @rlemon 谢谢。但是在你的 jsFiddle 中,这三行现在都是一样的。我实际上是在寻找我在问题中发布的方式的淡入但不淡出和淡出但不淡入效果。
    • 这不是真的。每条线都表现为一个自主对象并独立过渡。 Here 是同一个例子,只是持续时间更长。
    【解决方案2】:

    从您的示例看来,它的行为符合我的预期。 从一种状态到另一种状态的转换。

    我会尽力解释一下。

    在最后一个上,<div> 处于正常状态时有 2 秒的过渡,<div> 处于悬停状态时有 0 秒的过渡。

    那么发生了什么?

    1. 当您将鼠标悬停在<div> 上时,状态会更改为:hover,因此会运行div:hover 的转换。您的过渡为 0,因此不运行动画。
    2. 当您从<div> 中移除鼠标时,状态会从:hover 变回正常状态,因此div 在其正常状态下的转换运行。您在 2 秒内就有了这个。

    这是否解释了正在发生的事情以及转换如何工作?

    【讨论】:

    • 是的,我现在明白了。当然,我的第一个示例中的 div:hover 仍然是同一个 div,因此它也会获取 div 的转换值,除非你覆盖它。我没有直接得到 CSS 选择器。谢谢。
    猜你喜欢
    • 2011-08-15
    • 1970-01-01
    • 1970-01-01
    • 2014-11-29
    • 1970-01-01
    • 1970-01-01
    • 2020-05-05
    • 1970-01-01
    • 2016-11-21
    相关资源
    最近更新 更多