CSS3过渡不起作用答案

【问题标题】：CSS3 Transition not workingCSS3过渡不起作用
【发布时间】：2011-10-28 00:44:10
【问题描述】：

我无法在 this page 上进行转换，有人知道为什么吗？

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 */
}

【问题讨论】：

这是你需要的吗：jsfiddle.net/vSUQP/16
你到底想用背景做什么？
在页面上对我来说看起来很棒，所以看不出问题所在。

标签： css css-transitions

【解决方案1】：

一般问题的一般答案... 转换不能为自动属性设置动画。如果您的转换不起作用，请检查该属性的起始值是否已明确设置。

有时，当开始或结束值为自动时，您会希望设置高度和宽度的动画。（例如，要使 div 折叠，当它的高度是自动的并且必须保持这种状态时。）在这种情况下，请将转换放在 max-height 上。给 max-height 一个合理的初始值（大于其实际高度），然后将其转换为 0）

【讨论】：

很高兴知道。我只是将 max-height 替换为“none”而不是 scrollHeight +“px”，因为内部 div 在展开/折叠期间会改变大小，但这会阻止动画工作......您为我节省了很多研究时间。 :)
不敢相信这么简单。我在我的 JS 中将属性设置为“”，将其设置为“0”反而效果很好。
这是造成我问题的原因。我想要在“顶部”上进行过渡，但没有明确将默认“顶部”值设置为 0，过渡效果不会触发。感谢您的提示！

【解决方案2】：

对我来说，是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;
}

【讨论】：

虽然opacity: 0、visibility: hidden和display: none的输出结果是比较一致的，但是需要注意的是display: none会影响页面的整体布局，而前者只是隐藏元素，但保持布局就像元素在那里一样。此外，在使用opacity 和visibility 时，单击事件和事件传播仍然存在，所以要小心。您可能需要设置一个正确的pointer-events 值。

【解决方案3】：

过渡更像是动画。

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

【讨论】：

【解决方案4】：

如果您在页面上的任何位置都有<script> 标签（即使在 HTML 中，即使它是带有 src 的空标签），那么 transition 必须由某个事件激活（它不会' t 页面加载时自动触发）。

【讨论】：

【解决方案5】：

HTML：

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

CSS：

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

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

这只是一个基本的过渡，当它被悬停在 div 标签上时，它可以缓和 10px。过渡属性的值可以与 class.hover 属性一起编辑，以确定过渡的工作方式。

【讨论】：

【解决方案6】：

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

【讨论】：