Không sử dụng JavaScript, bạn bị giới hạn sử dụng chuyển tiếp CSS, nếu có. Và trong khi những điều này khá ấn tượng, chúng không đặc biệt tuyệt vời, cho đến nay tôi vẫn chưa tìm thấy, cho hoạt ảnh có điều kiện; về cơ bản chúng có thể sinh động từ điểm bắt đầu đến điểm khác và sau đó quay lại (dựa trên các sự kiện trình duyệt có sẵn trong chính trình duyệt), với JS bạn có thể thêm/xóa các lớp bổ sung và có các yếu tố div di chuyển xung quanh nội dung trái tim của bạn, nhưng không phải với CSS 'chỉ' (mặc dù tôi muốn được chứng minh là sai về điều này).
Điều tốt nhất tôi đã có thể đưa ra, cho đến nay, là:
#left {
float:left;
width:200px;
}
.right {
height: 0;
background-color: #fff;
margin-left: 205px;
overflow: hidden;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
.right:target {
display: block;
height: 5em;
background-color: #ffa;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
Và điều này không trượt từ bên (mặc dù bạn có thể làm điều đó nếu bạn muốn) bởi vì nó không nhìn tốt, cho nội dung tái reflow rằng đã xảy ra như chiều rộng của phần tử thay đổi.
Sửa vì tôi nghĩ rằng tôi có thể đã hiểu sai một phần của câu hỏi ban đầu:
... Tôi muốn mà không cần bất kỳ javascript
Đó là trường hợp , và bình luận (bên dưới) dường như gợi ý rằng jQuery là một lựa chọn tốt, điều này có thể đáng giá như một minh chứng:
$('#left a').click(
function(){
var div = $('div').not('#left').eq($(this).index('#left a'));
var others = $('div[data-visible="true"]');
others.each(
function(){
$(this).animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
});
if (div.attr('data-visible')) {
div.animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
}
else {
div.animate({
'left' : '210px'
},1000).attr('data-visible',true);
}
});
JS Fiddle demo.
Tài liệu tham khảo:
Nguồn
2012-03-25 21:52:20
Fiddle đầu tiên là vừa phải. Tôi sẽ đảm bảo tạo css của tôi trước khi thêm tập lệnh như bạn đã đề xuất. Điều này chỉ làm cho cuộc sống của tôi dễ dàng hơn nhiều - cảm ơn bạn rất nhiều! : D –
Hãy suy nghĩ về những gì bạn muốn làm và vị trí các yếu tố của bạn trong css cho phù hợp để họ đang ở vị trí tối ưu nhất để bắt đầu ngay khi cần thiết. – sg3s
Đây là một fiddle với những gì tôi đã có cho đến nay css khôn ngoan: http://jsfiddle.net/bridget_kilgallon/sMDyB/4/ fiddle hoạt động tốt nhưng quá trình chuyển đổi không hoạt động trong dreamweaver .. Bất kỳ ý tưởng? Cảm ơn một lần nữa -BK –