使用CSS过渡移动div

Question

我正在使用以下代码在鼠标悬停时显示一个隐藏的div。我使用CSS的transition属性来淡入隐藏的div。是否可以仅使用CSS将隐藏的div滑动（例如从左到右）而不是淡入呢？

这是我的代码：

HTML

<div class="box">
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
    <div class="hidden"></div>
</div>

CSS

=>

CSS

.box{
    position: relative;    
}

.box .hidden{    
   background: yellow;
    height: 300px;    
    position: absolute;
    top: 0;
    left: 0;    
    width: 500px;
    opacity: 0;    
    transition: all 1s ease;
}

.box:hover .hidden{
    opacity: 1;
}

演示： http://jsfiddle.net/u2FKM/

- user1251698

Answer 1

像这样吗？

演示

我使用的代码：

.box{
    position: relative;
    overflow: hidden;
}

.box:hover .hidden{

    left: 0px;
}

.box .hidden {    
    background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0;
    left: -500px;    
    width: 500px;
    opacity: 1;    
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

我可以补充一下，使用 transform: translate(); 也可以移动一个元素，这种情况下可能会像这样工作 - 演示 nr2

- Christofer Vilander

Answer 2

补充一下我的答案，似乎过渡效果需要基于 CSS 属性中的初始值和最终值来管理动画。

这些重新设计的 CSS 类应该提供预期的结果：

.box {
  position: relative;
  top: 0px;
  left: 0px;
  width: 0px;
}

.box:hover .hidden {
  opacity: 1;
  width: 500px;
}

.box .hidden {
  background: yellow;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  opacity: 0;
  transition: all 1s ease;
}

<div class="box">
  <a href="#">
    <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg">
  </a>
  <div class="hidden"></div>
</div>

http://jsfiddle.net/u2FKM/2199/

- Chris A

Answer 3

我已经添加了供应商前缀，并将动画更改为all，因此您可以同时进行透明度和宽度的动画效果。

这是您正在寻找的吗？http://jsfiddle.net/u2FKM/3/

- wakooka

Answer 4

transition-property:width;

这应该可以工作。你需要编写与浏览器相关的代码。

- Shamis Shukoor

Answer 5

这可能是您的良好解决方案：像这样进行非常小的代码更改。

.box{
    position: relative; 
}
.box:hover .hidden{
    opacity: 1;
    width:500px;
}
.box .hidden{
    background: yellow;
    height: 334px; 
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    opacity: 0;
    transition: all 1s ease;
}

请在此处查看演示

- Surya Adhikari