CSS3 过渡不起作用
我无法在此页面上进行转换,有人知道为什么吗?
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
有些浏览器不支持该代码。也许尝试使用不同的浏览器
Some browsers do not support the code. Maybe try using a different browser
对我来说,它有
display: none;
删除它,并使用
opacity
来解决这个问题。For me, it was having
display: none;
Removing it, and using
opacity
instead, fixed the issue.过渡更像是动画。
因此,您需要通过一个动作来调用该动画。
另请检查浏览器支持,以及您尝试执行的操作是否仍然存在问题!检查样式表中的 css-overrides,并检查
behavior: ***.htc
css hacks.. 可能有某些内容覆盖了您的转换!您应该检查一下:http://www.w3schools.com/css/css3_transitions.asp
Transition is more like an animation.
So you need to invoke that animation with an action.
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
如果页面上的任何位置都有
标记(即使在 HTML 中,即使它是带有
src
的空标记),那么转换必须由某些事件激活(页面加载时不会自动触发)。
If you have a
<script>
tag anywhere on your page (even in the HTML, even if it is an empty tag with asrc
), then atransition
must be activated by some event (it won't fire automatically when the page loads).HTML:
CSS:
这只是一个基本的过渡,当 div 标签悬停在上面时,它会将其缩小 10 像素。
过渡属性的值可以与 class.hover 属性一起编辑,以确定过渡的工作方式。
HTML:
CSS:
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.
如果您使用 React 并且遇到此问题,请确保您的组件保存在父组件之外的不同文件中。我的意思是:
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:
一般问题的一般答案...转换无法为自动属性设置动画。如果转换不起作用,请检查是否已显式设置属性的起始值。
有时,当开始或结束值为
auto
时,您需要为height
和width
设置动画。 (例如,要使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
andwidth
when the starting or finishing value isauto
. (For example, to make adiv
collapse, when its height isauto
and must stay that way.) In this case, put the transition onmax-height
instead. Givemax-height
a sensible initial value (bigger than its actual height), then transition it to 0.