angular.js - Mengapakah penambahan peralihan CSS3 menyebabkan pengikatan data sudut gagal?

Question

Masalahnya tidak mudah untuk dijelaskan, tolong bantu saya mengetahui perkara yang sedang berlaku.

1. Halaman senarai (seperti senarai pengguna biasa) Kerana setiap item dalam senarai mempunyai tetapan box-shadow, apabila tetikus melayang, box-shadow akan berubah untuk membuat kesan ini lebih lancar, tambah transition；

2. Senarai ini mempunyai kotak input penapis Masukkan beberapa kata kunci untuk memadankan item yang sepadan dalam senarai, dan item lain akan dialih keluar daripada DOM Ini ialah kesan penapisan data sudut biasa >

Masalahnya, selagi
3. ada, akan ada masalah dengan pengikatan data. Prestasi khusus adalah seperti berikut: dengan mengandaikan bahawa senarai itu mempunyai 10 item, kata kunci yang ditapis boleh memadankan salah satu daripadanya Walau bagaimanapun, selepas memasukkan kata kunci, item yang sepadan pasti akan muncul, dan terdapat juga beberapa item yang tidak sepadan (bilangannya tidak pasti. , tetapi setiap kali Akan ada sisa setiap kali). Kemudian jika anda menggunakan tetikus untuk mengapungkan item ini, yang padan akan terus wujud, dan yang tidak sepadan akan hilang

   transition

Jika anda mengalih keluar
4. semuanya akan menjadi normal.

   transition

Soalan ini membuatkan saya hairan Walaupun selepas bertanya kepada pakar Google, saya tidak menemui sebarang kes yang serupa, saya terpaksa meminta orang yang biasa dengan Angular untuk membantu saya memahami maksud ini. Versi sudut ialah

, terima kasih!

1.2.13

Selain itu, saya baru sahaja menemui butiran secara tidak sengaja: sebenarnya terdapat dua item senarai ini

---

Satu untuk bekas luar dan satu untuk gambar dalaman, serupa dengan struktur berikut:

<!--这是外包容器，有阴影，有 transition-->
<p class="item-wrapper">
    <!--这是里层内容，是图片，有 scale 效果，也有 transition-->
    <p class="item-inner">
        ...
    </p>
</p>

transition dalam

tidak akan menyebabkan masalah, hanya

luar yang akan (yang saya fikir ia sepatutnya, hanya untuk memastikan). Jadi penyelesaian sementara hanya boleh mengorbankan kesan kecerunan luaran... Walau bagaimanapun, saya masih ingin tahu, mengapa transition menjejaskan pengikatan data Angular? transition

Answer 1

Saya menyelesaikannya sendiri.

1. Jawapan mudah: Alihkan transition ke kelas pseudo, iaitu :hover; atau jangan gunakan css asli dan gunakan ng-animate sebaliknya, tetapi dalam kebanyakan kes penyelesaian asli lebih mudah daripada ng-animate.
2. Jawapan penuh: Lihat https://github.com/angular/angular.js/issues/6395.