当我改变左右变量时,我有一个需要从左到右和从右到左移动的元素.
这是一个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>
Alb*_*bzi 13
这是因为你没有给非悬停状态一个right属性.
right没有设置所以它试图从无到有0px.显然因为它没有什么可去的,它只是"扭曲"了.
如果你给出了未被发现的状态a right:90%;,它将转换你喜欢的方式.
正如旁注,如果您仍然希望它位于页面的左侧,则可以使用calccss函数.
例:
right: calc(100% - 100px)
^ width of div
你不必使用left那么.
此外,您无法使用left或转换,right auto并且会产生相同的"扭曲"效果.
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>CanIUse表示该calc()功能仅适用于IE10+
小智 7
试试这个
div
{
width:100px;
height:100px;
background:red;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div:hover
{
transform: translate(3em,0);
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}<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>