c'è un esempio di animazione ng-if in questo documento: https://docs.angularjs.org/api/ng/directive/ngIf se si fa clic sulla casella di controllo rapidamente e ripetutamente, si troverà più di un elemento verrà visualizzato, Non so come evitarlo.congedo rapido e immettere causa più elementi in ng angolare-se animazione
Ciò accade perché ngIf si comporta in modo diverso a ngShow ad esempio. ngShow aggiunge semplicemente uno stile display: none all'elemento che deve essere nascosto, mentre ngIf esegue le seguenti operazioni:
La direttiva ngIf rimuove o ricrea una parte della struttura DOM sulla base di una {espressione}. Se l'espressione assegnata a ngIf valuta in un valore falso, allora l'elemento viene rimosso dal DOM, altrimenti un clone dell'elemento viene reinserito nel DOM.
Quindi se l'animazione richiede un po 'di tempo, ci sarà più di un elemento nel DOM.
Nell'esempio di Olivvv, se si modifica semplicemente il ritardo di .animate-if.ng-enter, .animate-if.ng-leave su 0.001s, si vedrà che non è possibile ottenere più di un elemento.
Qui per voi è una versione biforcuta della documentazione ufficiale di AngularJS. http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
ho modificato solo il suo ritardo da 0.5s a 0.001s
Grazie per la spiegazione. Quindi la clonazione è più veloce della rimozione e non si bloccano a vicenda? quindi se vuoi mantenere l'animazione "lunga", qual è la soluzione? aggiungi un debouncer per impedire che i clic attivino l'attivazione e la disattivazione mentre l'animazione è ancora in esecuzione? (btw, non dovrebbe essere angolare come una struttura prendersi cura di questo? imo non dovremmo ottenere le condizioni di gara semplicemente usando la condizione più standard) – Olivvv
Prima di tutto ricordiamo che AngularJS viene utilizzato da milioni di persone, quindi credo che per il dilemma di mantenerlo standard ma costringendoti ad usarlo in quel modo, o dandoti la libertà di usarlo come vuoi, lo hanno mantenuto con il secondo. –
Quindi un'altra cosa da considerare è l'uso di ngShow, che è considerato una soluzione migliore quando lo stato viene modificato spesso. Non è necessario rimuoverlo da de DOM e ricrearlo ogni volta. Potresti fare ciò che hai menzionato con un debouncer per prevenire i clic ma è una buona soluzione UX? O è solo una soluzione quasi sporca? –
nella classe .animate-se si può dare position: absolute; –