我有以下内容: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;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
我认为它与left: auto
有关,因为如果我更改它left: 50%
,它会起作用,但不是我需要的方式。
感谢。
答案 0 :(得分:5)
正如您所说,您可以从%
动画到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)
}
检查 Demo Fiddle
答案 1 :(得分:2)
考虑转换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;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
答案 2 :(得分:0)
要转换为工作,您必须在两个元素状态中定义要更改的属性。 在你的例子中,它不起作用,因为'。hidden'和':hover'之间没有共同属性(你在'.hidden'中设置'左'属性,'正确''属性':hover')
如果您改为使用以下内容:
.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%;
}
它会起作用,因为我们在两种状态中都定义了'正确'属性('。hidden'和':hover')