当我改变左右变量时,我有一个需要从左到右和从右到左移动的元素.
这是一个jsfiddle示例,我正在研究它.它从左到右,从右到左移动,但没有动画.
我做错了什么?
CSS:
div { width:100px; height:100px; background:red; transition-property: right,left; transition-duration: 2s; -webkit-transition-property: right,left; /* Safari */ -webkit-transition-duration: 2s; /* Safari */ position:absolute; } div:hover { right:0px; }
HTML:
<body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> <p>Hover over the div element above,to see the transition effect.</p> </body>
解决方法
这是因为你没有给予非徘徊状态一个正确的属性.
没有设置权利所以它试图从零到0px.显然,因为它没有什么可去的,它只是“扭曲”了.
如果你给未受阻的状态一个权利:90%;它会转换你喜欢的方式.
正如旁注,如果您仍然希望它位于页面的左侧,则可以使用calc css函数.
例:
right: calc(100% - 100px) ^ width of div
你不必使用左.
此外,您不能使用左或右自动转换,并将提供相同的“扭曲”效果.
div { width:100px; height:100px; background:red; transition:2s; -webkit-transition:2s; -moz-transition:2s; position:absolute; right:calc(100% - 100px); } div:hover { right:0; }
<p> <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions. </p> <div></div> <p>Hover over the red square to see the transition effect.</p>
原文地址:https://www.jb51.cc/html/227080.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。