di chuyển div bằng chuyển đổi CSS

Question

Tôi đang sử dụng mã sau để hiển thị div ẩn khi di chuột. Tôi đang sử dụng thuộc tính CSS transition để mờ dần trong div ẩn. Có thể trượt trong ẩn (ví dụ từ trái sang phải) div thay vì mờ dần khi chỉ sử dụng CSS? Dưới đây là mã của tôi:

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

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

Answer 1

Một cái gì đó như thế này?

DEMO

Và mã tôi đã sử dụng:

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

tôi cũng có thể thêm rằng nó có thể di chuyển một elment sử dụng transform: translate();, mà trong trường hợp này có thể làm việc gì đó như thế này - DEMO nr2

Answer 2

Có nghĩa là có thể, nhưng không được tất cả các trình duyệt hỗ trợ.

Xem w3schools

Answer 3

transition-property:width; 

này nên làm việc. bạn phải có mã phụ thuộc trình duyệt

Answer 4

Tôi đã thêm tiền tố của nhà cung cấp và thay đổi hoạt ảnh thành all, vì vậy bạn có cả độ mờ và chiều rộng được làm động.

Đây có phải là những gì bạn đang tìm kiếm không? http://jsfiddle.net/u2FKM/3/

Answer 5

Đây có thể là giải pháp tốt cho bạn: thay đổi mã như thế này rất ít thay đổi

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

Xem demo here

Answer 6

Chỉ cần thêm câu trả lời của tôi, có vẻ như quá trình chuyển đổi cần phải được dựa trên các giá trị ban đầu và giá trị cuối cùng trong các thuộc tính css để có thể quản lý các hình ảnh động.

Những lớp css làm lại nên cung cấp các kết quả mong đợi:

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