使用CSS轉換移動div

我正在使用以下代碼在懸停上顯示隱藏的div。我正在使用CSS transition屬性來淡入隱藏的div。是否可以滑動隱藏（例如從左到右）的div而不是淡入淡出只使用CSS？這裏是我的代碼：使用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

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

來源

2012-12-20 user1251698

是這樣的嗎？

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();，在這種情況下可以工作，這樣的事情來移動elment - DEMO nr2

來源

2012-12-20 09:20:02

-2

是的，這是可能的，但並不受所有瀏覽器的支持。

見w3schools

來源

2012-12-20 09:08:06 noslone

不要使用W3Schools的爲引用請，這是爲什麼：http://w3fools.com / – wandarkaf

transition-property:width;

這應該工作。您必須擁有瀏覽器相關代碼

來源

2012-12-20 09:08:41

我添加了供應商前綴，並將動畫更改爲all，因此您擁有動畫的不透明度和寬度。

這是你在找什麼？ http://jsfiddle.net/u2FKM/3/

來源

2012-12-20 09:19:49 wakooka

這可能是你很好的解決方案：改變這樣的代碼很少變化

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

見demo here

來源

2012-12-20 09:58:52

我想補充我的回答，似乎轉變需要基於對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-23 20:28:19

使用CSS轉換移動div

回答

相關問題