当我改变左右变量时,我有一个需要从左到右和从右到左移动的元素.
这是一个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>
