có thể tạo hiệu ứng chèn và loại bỏ flexbox không?

Question

Khi tôi xóa một mục khỏi flexbox, các mục còn lại "snap" vào vị trí mới của chúng ngay lập tức chứ không phải là hoạt ảnh.

Về mặt khái niệm, vì các mục đang thay đổi vị trí của chúng, tôi sẽ mong đợi quá trình chuyển đổi áp dụng.

tôi đã thiết lập thuộc tính chuyển tiếp trên tất cả các yếu tố có liên quan (các flexbox và trẻ em)

Có cách nào để animate chỉnh sửa (thêm & xóa) vào một flexbox? Điều này thực sự là một showstopper cho tôi và một phần thiếu với flexbox.

Answer 1

Hãy nhớ rằng các mô hình Hộp linh hoạt và Đặc điểm bố cục lưới đang thay đổi liên tục, ngay cả các thuộc tính và giá trị hợp lệ. Việc triển khai trình duyệt cũng không hoàn chỉnh. Điều đó đang được nói, bạn có thể chuyển đổi trên thuộc tính flex để các phần tử chuyển đổi suôn sẻ, sau đó chỉ cần nghe TransitionEnd để cuối cùng xóa nút khỏi cây DOM.

Dưới đây là một ví dụ JSFiddle, chạy trong Chrome 21: http://jsfiddle.net/5kJjM/ (nhấp vào div giữa)

var node = document.querySelector('#remove-me'); 
 

 
node.addEventListener('click', function(evt) { 
 
    this.classList.add('clicked'); 
 
}, false); 
 

 
node.addEventListener('webkitTransitionEnd', function(evt) { 
 
    document.querySelector('#flexbox').removeChild(this); 
 
}, false);

#flexbox { 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row; 
 
} 
 

 
.flexed { 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    -webkit-flex: 1 0 auto; 
 
    -webkit-transition: -webkit-flex 250ms linear; 
 
} 
 

 
.clicked { 
 
    -webkit-flex: 0 0 auto; 
 
}

<div id="flexbox"> 
 
    <div class="flexed"></div> 
 
    <div class="flexed" id="remove-me"></div> 
 
    <div class="flexed"></div> 
 
</div>

Sửa: Để làm rõ hơn nữa, khi bạn loại bỏ một nút, bạn nên đặt flex thành 0, sau đó xóa nó khỏi DOM. Khi thêm nút, hãy thêm nó vào bằng flex: 0, sau đó chuyển nó thành flex: 1

Answer 2

Tôi đã cố định bản demo @ skyline3000 dựa trên ví dụ này từ Treehouse. Bạn không chắc chắn nếu điều này sẽ phá vỡ một lần nữa nếu các trình duyệt thay đổi nhưng điều này dường như là cách nhằm động thay đổi kích thước flex:

http://jsfiddle.net/2gbPg/2/

Ngoài ra tôi sử dụng jQuery nhưng nó về mặt kỹ thuật là không cần thiết.

.flexed { 
    background: grey; 
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */ 
    /* border: 1px solid black; */ 
    margin: 5px; 
    height: 100px; 
    flex-grow: 1; 
    transition: flex-grow 1000ms linear; 
} 

.removed { 
    /* Setting this to zero breaks the transition */ 
    flex-grow: 0.00001; 
} 

Một điều cần lưu ý về CSS là bạn không thể chuyển đổi sang số flex-grow bằng không, nó sẽ không chuyển đổi nó sẽ biến mất. Bạn chỉ cần đặt một giá trị rất nhỏ. Ngoài ra có vẻ như là một lỗi tạo tác khi vẽ đường viền vì vậy tôi đã sử dụng nền trong trường hợp này.