微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

多个css3过渡类型不使用’all’

我正在尝试使用 CSS3过渡来转换比例和不透明度 – 我无法解决如何在不使用所有内容的情况下转换多个内容

transition-function: all;
transition-duration: 1s;
transition-timing-function: ease-in;

工作,如:

transition: all 1s ease-in;

transition-function: opacity;

要么

transition-function: scale;

但不是

transition-function: scale,opacity;

请参见此处的示例:http://jsfiddle.net/5PCGs/7/

任何帮助将非常感激!谢谢 :) !

编辑:

我已经解决了它的过渡属性(感谢Simone),但现在它只是在Firefox中激活不透明,而不是两者 – http://jsfiddle.net/5PCGs/9 – 在FF和Chrome中并排比较

解决方法

感谢 Boris ZbarskySimone Vittori.

答案是使用transition-property并且不指定你在那里转换的所有东西,只需将transform作为其中一个值,并让类之间的转换中的差异自行处理.

transition-property: transform,opacity;
transition-duration: 1s;
transition-timing-function: ease-in;

编辑:不要为这些添加你需要的任何前缀.例如,对于Webkit浏览器:

-webkit-transition-property: -webkit-transform,opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;

再次感谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。