CSS3 过渡不起作用

发布于 2024-12-12 11:27:10 字数 427 浏览 2 评论 0原文

我无法在此页面上进行转换,有人知道为什么吗?

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

I couldn't get transitions to work on this page, anybody has any idea why?

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

自找没趣 2024-12-19 11:27:12

有些浏览器不支持该代码。也许尝试使用不同的浏览器

Some browsers do not support the code. Maybe try using a different browser

夏末 2024-12-19 11:27:11

对我来说,它有 display: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

删除它,并使用 opacity 来解决这个问题。

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}

For me, it was having display: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

Removing it, and using opacity instead, fixed the issue.

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}
不顾 2024-12-19 11:27:11

过渡更像是动画。

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

因此,您需要通过一个动作来调用该动画。

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

另请检查浏览器支持,以及您尝试执行的操作是否仍然存在问题!检查样式表中的 css-overrides,并检查 behavior: ***.htc css hacks.. 可能有某些内容覆盖了您的转换!

您应该检查一下:http://www.w3schools.com/css/css3_transitions.asp

Transition is more like an animation.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

So you need to invoke that animation with an action.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for behavior: ***.htc css hacks.. there may be something overriding your transition!

You should check this out: http://www.w3schools.com/css/css3_transitions.asp

初吻给了烟 2024-12-19 11:27:11

如果页面上的任何位置都有

If you have a <script> tag anywhere on your page (even in the HTML, even if it is an empty tag with a src), then a transition must be activated by some event (it won't fire automatically when the page loads).

向日葵 2024-12-19 11:27:11

HTML:

<div class="foo">
    /* whatever is required */
</div>

CSS:

.foo {
    top: 0;
    transition: top ease 0.5s;
}

.foo:hover{
    top: -10px;
}

这只是一个基本的过渡,当 div 标签悬停在上面时,它会将其缩小 10 像素。
过渡属性的值可以与 class.hover 属性一起编辑,以确定过渡的工作方式。

HTML:

<div class="foo">
    /* whatever is required */
</div>

CSS:

.foo {
    top: 0;
    transition: top ease 0.5s;
}

.foo:hover{
    top: -10px;
}

This is just a basic transition to ease the div tag up by 10px when it is hovered on.
The transition property's values can be edited along with the class.hover properties to determine how the transition works.

请叫√我孤独 2024-12-19 11:27:11

如果您使用 React 并且遇到此问题,请确保您的组件保存在父组件之外的不同文件中。我的意思是:

const Parent = () => {
    const ChildComp = () => (
    // element whose transition wont work
    )
    return (
        <div>
           <ChildComp />
        </div>
    )
}

If you're using react and you run into this problem, make sure your component is kept in a different file other than the parent component. What I mean is:

const Parent = () => {
    const ChildComp = () => (
    // element whose transition wont work
    )
    return (
        <div>
           <ChildComp />
        </div>
    )
}
戏剧牡丹亭 2024-12-19 11:27:10

一般问题的一般答案...转换无法为自动属性设置动画。如果转换不起作用,请检查是否已显式设置属性的起始值。

有时,当开始或结束值为 auto 时,您需要为 heightwidth 设置动画。 (例如,要使 div 折叠,当其高度为 auto 且必须保持这种状态时。)在这种情况下,请将过渡置于 max-height 上 相反。给 max-height 一个合理的初始值(大于其实际高度),然后将其转换为 0。

A general answer for a general question... Transitions can't animate properties that are auto. If you have a transition not working, check that the starting value of the property is explicitly set.

Sometimes, you'll want to animate height and width when the starting or finishing value is auto. (For example, to make a div collapse, when its height is auto and must stay that way.) In this case, put the transition on max-height instead. Give max-height a sensible initial value (bigger than its actual height), then transition it to 0.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文