17

我正在使用以下代码在悬停时显示隐藏的 div。我正在使用 CSStransition属性来淡入隐藏的 div。是否可以在隐藏的（例如从左到右）div 中滑动而不是仅使用 CSS 淡入？这是我的代码：

HTML

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

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/

4

5 回答 5

27

像这样的东西？

演示

我使用的代码：

.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();，在这种情况下，它可以像这样工作 - DEMO nr2

于 2012-12-20T09:20:02.243 回答
3

我添加了供应商前缀，并将动画更改为all，因此您拥有动画的不透明度和宽度。

这是你要找的吗？http://jsfiddle.net/u2FKM/3/

于 2012-12-20T09:19:49.137 回答
3

只是为了添加我的答案，似乎转换需要基于 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/

于 2017-10-23T20:28:19.020 回答
2 
transition-property:width;

这应该有效。你必须有浏览器相关的代码

于 2012-12-20T09:08:41.690 回答
1

这对您来说可能是一个很好的解决方案：像这样更改代码

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

在此处查看演示

于 2012-12-20T09:58:52.293 回答