从100％转换为汽车 [英] Transition from 100% to auto

问题描述

我有以下内容： http://jsfiddle.net/yHPTv/2491/

我想知道为什么转换不工作？它应该做的是在隐藏元素（可以是可变宽度）滑动到 .block 元素的右边缘，但是，它只是弹出。 / p>

  .block {position：relative; width：500px; height：300px; overflow：hidden; background：lightgrey;}。block .hidden {background：red; padding：3px 10px; position：absolute; bottom：0;左：100％; transition：1s;}。block：hover .hidden {transition：1s; left：auto; right：0;}  

 < div class = > < div class =hidden> ABCDEFGHIJKL< / div>< / div>  

我认为它与 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）
} 
  

a href =http://jsfiddle.net/yHPTv/2492/>演示小提琴

I have the following: http://jsfiddle.net/yHPTv/2491/

I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.

.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>

I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.

Thanks.

解决方案

As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:

.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)
}

Check the Demo Fiddle

这篇关于从100％转换为汽车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！