Html 使用 CSS 过渡移动 div

move div with CSS transition

提问by user1251698

I am using following code to display a hidden div on hover. I'm using the CSS transitionproperty for to fade in the hidden div. Is it possible to slide in the hidden (for example from left to right) div instead of fading in using the CSS only? Here's my code:

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

HTML

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

Demo:http://jsfiddle.net/u2FKM/

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

回答by Christofer Vilander

Something like this?

像这样的东西？

DEMO

演示

And the code I used:

我使用的代码：

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

I may also add that it's possible to move an elment using transform: translate();, which in this case could work something like this - DEMO nr2

我还可以补充一点，可以使用 移动元素transform: translate();，在这种情况下可以像这样工作 - DEMO nr2

回答by wakooka

I added the vendor prefixes, and changed the animation to all, so you have both opacity and width that are animated.

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

Is this what you're looking for ? http://jsfiddle.net/u2FKM/3/

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

回答by Chris A

Just to add my answer, it seems that the transitions need to be based on initial values and final values within the css properties to be able to manage the animation.

只是添加我的答案，似乎过渡需要基于 css 属性中的初始值和最终值才能管理动画。

Those reworked css classes should provide the expected result :

那些重新设计的 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/

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

回答by Shamis Shukoor

transition-property:width;

This should work. you have to have browser dependent code

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

回答by Surya Adhikari

This may be the good solution for you: change the code like this very little change

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

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

See demo here

在这里查看演示

回答by noslone

Yes that is possible, but is not supported by all browsers.

是的，这是可能的，但并非所有浏览器都支持。

See w3schools

见w3schools