html – CSS Transitions仅适用于Chrome

概述我创建了一个菜单,当您将鼠标悬停在链接上时,标题幻灯片会从框架中向左移动,并且不同的单词会滑入(客户端请求).我试图仅在CSS中执行此 *** 作,它在Chrome中完全按预期工作,但在Firefox或Opera中没有.只有第二个动画(其中插入不同的单词)才有效,但主动画(普通单词滑出的地方)没有应用其过渡.这是一个带有示例的jsFiddle： http://jsfiddle.net/3tUAN/ 如果必 我创建了一个菜单,当您将鼠标悬停在链接上时,标题幻灯片会从框架中向左移动,并且不同的单词会滑入(客户端请求).我试图仅在CSS中执行此 *** 作,它在Chrome中完全按预期工作,但在firefox或Opera中没有.只有第二个动画(其中插入不同的单词)才有效,但主动画(普通单词滑出的地方)没有应用其过渡.这是一个带有示例的Jsfiddle：

http://jsfiddle.net/3tUAN/

如果必须的话,我可以使用jquery(代码就在那里,IE9已经需要)但是如果可能的话我想让它适用于CSS.我曾考虑尝试使用选择器更具体(使用子选择器,类似a.Menulink> li.MenuItem> span.MenuTitle),但我希望社区可以帮助我这个.

解决方法 您需要为span.MenuTitle指定左侧的初始值.这可能是其他浏览器中的错误,但它在firefox中修复了它.像这样的东西：

span.MenuTitle {    left: 0;}

见这jsFiddle

总结

以上是内存溢出为你收集整理的html – CSS Transitions仅适用于Chrome全部内容，希望文章能够帮你解决html – CSS Transitions仅适用于Chrome所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。