Cách hiển thị/ẩn thành phần hoạt ảnh trong Aurelia

Question

Tôi có một thành phần phụ mà tôi muốn hiển thị/ẩn theo cách động, giống như thành phần thu gọn của Bootstrap. Nút kích hoạt khả năng hiển thị nằm ở chế độ xem bên ngoài (không phải bên trong chế độ xem phụ).

Khi sử dụng các cú pháp cơ bản

<compose view-model="edit-x" model.bind="x" show.bind="shouldShow"></compose> 

(hoặc cú pháp tương ứng với tên phần tử tùy chỉnh html), nó hoạt động, nhưng nó chỉ xuất hiện (không động).

Đề xuất 1 - sử dụng Aurelia hoạt hình

tôi đã cố gắng thêm một class='au-animate' không có hiệu lực thi hành (cũng bao gồm các aurelia-phim hoạt hình-css trong main.js cho điều đó).

Đề xuất 2 - Sử dụng Bootstrap

Một giải pháp khả thi có thể là có lẽ để sử dụng Bootstrap, và vượt qua trong một tham số thứ hai (visible) với thành phần, sau đó có các thành phần một cách nào đó theo dõi rằng biến và cuộc gọi $('.collapse').collapse('toggle'). Làm thế nào tôi sau đó sẽ vượt qua trong hai biến trong model.bind? Và làm thế nào để theo dõi nó? Bạn có thể sử dụng @bindable trên setter không?

Đề xuất 3 - Sử dụng Bootstrap từ các thành phần bên ngoài

Có lẽ đơn giản nhất sẽ được gọi $('#subcomponentName .collapse').collapse('toggle') từ cái nhìn bên ngoài? Nó xấu xí này? Tôi làm các yếu tố tham chiếu trong chế độ xem phụ từ chế độ xem bên ngoài, có thể vượt qua một số ranh giới, nhưng mã sẽ nhỏ?

Answer 1

(Trả lời câu hỏi của riêng tôi ở đây, vì có được nhiều việc phải làm để có được nó làm việc)

Got này để làm việc:

đầu tiên bằng cách làm theo @ bình luận về if.bind thay vì show.bind Gusten của. Sau đó, bằng cách thêm các lớp CSS cho hoạt ảnh. Nó cũng có vẻ giống như phần tử hoạt hình (phần tử có lớp là au-animate css) phải là phần tử đầu tiên bên dưới phần tử gốc <template>.

Vì vậy, trong CSS của tôi:

div.test.au-enter-active { 
    -webkit-animation: fadeInRight 1s; 
    animation: fadeInRight 1s; 
} 

và sau đó các yếu tố:

<template> 
    <div class="test au-animate"> 
    ... 

(chú ý đến + lớp au-animate của riêng tôi test, sau này chỉ có lựa chọn dễ dàng của nguyên tố này)

Hình động CSS fadeInRight được định nghĩa ở nơi khác trong tệp CSS.