Làm thế nào để thiết lập chuyển tiếp CSS để một nhân tố mới hoặc làm tương tự với JavaScript

Xin chào, tôi thấy một menu CSS3 trong đó có sự chuyển tiếp rất đẹp:Làm thế nào để thiết lập chuyển tiếp CSS để một nhân tố mới hoặc làm tương tự với JavaScript

transition: all 0.3s ease 0.1s;

Tôi muốn áp dụng quá trình chuyển đổi tương tự để bàn của tôi. Tôi đã có một bảng mà trên nhấp vào hàng bảng, hàng mới được nối sau hàng được nhấp và nó được hiển thị hoặc ẩn.

Giống như trong đoạn code dưới đây (clickedTableRow có giá trị của jQuery selector cho hàng nhấp):

clickedTableRow.after('<tr style="display:none;"><td>some content</td></tr>'); 
clickedTableRow.next().slideDown(3000);

Thay vì slideDown làm thế nào tôi có thể áp dụng quá trình chuyển đổi css trên để dòng của bảng mới được bổ sung hoặc là có javascript tương đương?

Câu hỏi cập nhật:

Có lẽ tôi nên rephrase. Cách tốt nhất để trượt xuống từ từ một số nội dung mới được tạo ra là gì?

Nó có vẻ như:

clickedTableRow.after('<tr><td>some content</td></tr>').slideDown(3000);

Trông giống như

clickedTableRow.after('<tr><td>some content</td></tr>');

Nếu không có hiệu lực slideDown, những gì tôi thiếu ở đây?

Nguồn

2012-10-15 London

http://api.jquery.com/animate/ đọc nội dung này, nó sẽ giúp chắc chắn. –

Cảm ơn tôi đã đi máng, và cố gắng bó của công cụ đó là lý do tại sao tôi đã kết thúc ở đây tôi phải làm một cái gì đó sai rõ ràng là – London

tôi thực sự rơi vào u này có thể muốn bắt đầu một bounty về nó. –

thêm một số css để stylesheet như

.transition{ 
    transition: all 0.3s ease 0.1s; 
    }

sau đó

clickedTableRow.next().addClass('transition');

Nguồn

2012-10-15 11:10:39 fuzionpro

cảm ơn phản hồi của bạn. điều này khác với câu trả lời dưới đây như thế nào? – London

Dude không có câu trả lời nào dưới đây lol – ankur

@ankur: có một câu trả lời (gần như) giống nhau nếu bạn có đủ danh tiếng. Nó chỉ là nó đã bị xóa nửa giờ sau khi * fusionpro * gửi câu trả lời của họ. –

Nếu tôi hiểu câu hỏi đúng, bạn được tự động thêm một số nội dung để bàn của bạn (thông qua ajax?) Và thay vào đó chỉ xuất hiện ở dưới cùng của bảng, bạn muốn nó trượt ra?

gì bạn đang thiếu là hide():

clickedTableRow.after('<tr><td>some content</td></tr>').hide().slideDown(3000);

.slideDown(speed) là một thay thế cho .show(speed), nhưng đối với một trong hai để làm việc yếu tố cần phải được ẩn, hoặc là sử dụng CSS (display:none) hoặc bằng cách .hide(speed) ing nó.

[sửa]

Bảng hàng hiện chướng ngại vật đặc biệt đến hoạt hình, kể từ khi các trình duyệt sử dụng giá trị khác nhau (bảng hàng và khối) để trưng bày có thể nhìn thấy họ tài sản. Các phương thức .hide() và .show(), không có hoạt ảnh, là luôn an toàn để sử dụng với các hàng trong bảng. Kể từ phiên bản jQuery 1.1.3, .fadeIn() và .fadeOut() cũng có thể được sử dụng.

Để khắc phục, bạn cần bọc nội dung của mình vào div và hiển thị nội dung đó.Tôi đã tạo ra một jsFiddle:

http://jsfiddle.net/VXe6r/

Nguồn

2012-10-19 09:20:12

Vì vậy, trên giải pháp sẽ làm sử dụng thư viện jquery animate này. Điều này cũng có thể được thực hiện bằng cách sử dụng css3.

tôi đã không chỉnh mã cho bất kỳ hành vi lạ mắt, tôi hy vọng ý tưởng này là rõ ràng:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Slide Add Row</title> 
</head> 
<body> 
<table> 
    <tr><td>some content</td></tr> 
</table> 
</body> 
</html>

CSS:

div { 
     -moz-animation-duration: 1s; 
     -webkit-animation-duration: 1s; 
     -moz-animation-name: slidein; 
     -webkit-animation-name: slidein; 
    position:relative; 
    } 

    @-moz-keyframes slidein { 
     from { 
      top:-20px; 
     } 

     to { 
      top:0px; 
     } 
    } 

    @-webkit-keyframes slidein { 
     from { 
      top:-20px; 
     } 

     to { 
      top:0px; 
     } 
    }

và JS (chỉ dành cho tự động thêm các hàng:

$('table').on('click', function(){ 
    $tbody = $(this).find('tbody:last'); 
    $tbody.after('<tr><td><div>new</div></td></tr>'); 
});

Một bản demo trực tiếp:

http://jsbin.com/unacog/9/

điểm cần lưu ý:

Các dữ liệu trong TD cần được bao bọc, implemntation CSS3 Animate hiện tại sẽ không làm việc khác.
Không hỗ trợ trình duyệt IE, ofcourse, Hoạt động trong Chrome, FireFox và Safari.

BTW - Sử dụng hình ảnh động css cho tự do cho nhiều cách khác để chơi với các hình ảnh động, ví dụ, dựa trên font-size: http://jsbin.com/unacog/11/

Nguồn

2012-10-19 21:09:23

http://jsfiddle.net/xMRhE/4/

$itemBeingAdded = $("<div class='inner start-animation'></div>");  
    $testTable.append($itemBeingAdded); 
    setTimeout(function() { 
     $itemBeingAdded.removeClass("start-animation"); 
    }, 100);

Và css hiệu ứng trang trình bày:

.inner { 
    height : 50px; 
    -moz-transition: all 0.3s ease 0.1s; 
    -webkit-transition: all 0.3s ease 0.1s; 
    transition: all 0.3s ease 0.1s; 
    background : #ded; 
    border : 1px solid #999; 
} 

.inner.start-animation { 
    height : 0px; 
}

Th là cách tiếp cận của tôi. Instad trượt xuống, bạn chỉ làm sống động chiều cao từ 0 đến 100% chiều cao bình thường.

Điều này được thực hiện bằng cách thêm hàng bảng, phần tử, div hoặc bạn có lớp cơ bản và lớp "bắt đầu", bổ sung thêm kiểu trạng thái ban đầu (hoặc khung hình chính) cho hoạt ảnh. Ngay sau khi bạn thêm phần tử vào dom, bạn loại bỏ lớp khung chính bắt đầu.

Trình duyệt sau đó tính toán những gì nó có hiệu ứng để làm cho phần tử trông giống như "khung" tiếp theo được xác định bởi các thuộc tính thực sự ảnh hưởng đến nó tại thời điểm đó.

Nguồn

2012-10-25 08:00:10

"Cách tốt nhất để trượt xuống từ từ một số nội dung mới được tạo ra là gì?"

Đặt nội dung bên trong vùng chứa ban đầu ẩn nó. Sau đó, slideDown phụ huynh để tiết lộ đứa con mới được thêm vào.Điều này sẽ cực kỳ khó khăn với một hàng bảng (<tr>) vì một bảng không phải là cùng một loại phần tử cấp khối như là một <div>, <span>, <p>, etc. - nó là một con thú độc đáo, và không phải tất cả các trình duyệt đều chế ngự nó cùng một cách. (Giải thích khá rõ trong this S.O. question)

Vì vậy - nếu đó là tôi - tôi sẽ làm cho bảng và các tế bào của tôi hoàn toàn ngữ nghĩa, và bọc bảng vào thứ gì đó có thể ẩn các hàng (nếu tôi bị buộc phải sử dụng bảng):

http://jsfiddle.net/25uQr/ (vâng, tôi đã dành quá nhiều thời gian vào nó)

Đối với những gì bạn mô tả trong bài viết của bạn, tôi đã sử dụng một <ul>,<ol>, or <dl>. Con cái của chúng hoạt động giống như một hàng bảng, nhưng là các phần tử mức khối ... do đó thao tác khá thẳng về phía trước và an toàn giữa các trình duyệt (ish) er.

Nguồn

2012-10-25 19:52:58 Dawson

Làm thế nào để thiết lập chuyển tiếp CSS để một nhân tố mới hoặc làm tương tự với JavaScript

Trả lời

Các vấn đề liên quan