从100%过渡到自动

Question

我有以下内容: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%,它可以工作,但不是我需要的方式.

谢谢.

Answer 1

正如你所说,你不能动画%到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)
}

检查演示小提琴