从100％过渡到自动
我有以下内容： http ： //jsfiddle.net/yHPTv/2491/
我想知道为什么过渡不起作用？ 它应该做的是将隐藏元素（可以是可变宽度）滑动到.block元素的右边缘，但是，它只是弹出。
.block { position: relative; width: 500px; height: 300px; overflow: hidden; background: lightgrey; } .block .hidden { background: red; padding: 3px 10px; position: absolute; bottom: 0; left: 100%; transition: 1s; } .block:hover .hidden { transition: 1s; left: auto; right: 0; }
ABCDEFGHIJKL
我认为这与left: auto因为如果我将其改为left: 50% ，它有效，但不是我需要的方式。
谢谢。
正如你所说，你无法从%动画到auto 。 但是为了获得欲望效果，您还可以使用transform属性。 试试这个：
.block .hidden { background: red; padding: 3px 10px; position: absolute; bottom: 0; right: 0; transform:translateX(100%); transition: 1s; } .block:hover .hidden { transition: 1s; transform:translateX(0) }
检查演示小提琴
考虑从right转换，从-100%到0 ：
.block { position: relative; width: 500px; height: 150px; /* shortened to fit in the "Run" window */ overflow: hidden; background: lightgrey; } .block .hidden { background: red; padding: 3px 10px; position: absolute; bottom: 0; right: -100%; transition: 1s; } .block:hover .hidden { right: 0; transition: 1s; }
ABCDEFGHIJKL
要转换为工作，您必须在两个元素状态中定义要更改的属性。 在你的例子中它不起作用，因为’。hidden’和’：hover’之间没有共同属性（你在’.hidden’中设置’ left ‘属性，在’：hover’中设置’ right ‘属性）
如果您改为使用以下内容：
.block { position: relative; width: 500px; height: 300px; overflow: hidden; background: lightgrey; } .block .hidden { background: red; padding: 3px 10px; position: absolute; bottom: 0; right: -100%; transition: 1s; } .block:hover .hidden { transition: 1s; right: 0%; }
它会起作用，因为我们在两个州定义了’ right ‘属性（’。hidden’和’：hover’）