使用CSS过渡移动div [英] move div with CSS transition

问题描述

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

I am using following code to display a hidden div on hover. I'm using the CSS transition property 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:

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/

推荐答案

这样的东西吗？

DEMO

我使用的代码：

.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

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

这篇关于使用CSS过渡移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！