vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.56k stars 8.31k forks source link

Transition: custom appear(-active/to) classes stay on the element after transition ends. #9396

Open cess123456 opened 1 year ago

cess123456 commented 1 year ago

Vue version

3.2.20

Link to minimal reproduction

https://play.vuejs.org/#eNp9VEtu2zAQvQrBLiwDjpQm6EaRjSZBFi3QD5ostWGkkayEIgWSchQYWrebXqJ3a8/R4UeyUxQxDIgz8zicz5vZ08uui3c90JRmulBNZ4gG03ebXDRtJ5Uhe6KgWt0pJnRjGilWUnySvTBQkpFUSrZkgfcXM/5KDkEdJ/dysM4XF7kopNDoeyufyNp6jCrGNSwnw5aJksPtU2OKLQJIVHFWL8l6Q/a5IO5evGO8h7U15GJEl4TMoUTRcr1xSPs7QhvVg1eP+FaW+BwxOxQMtB1nBlAi2X1vjETg+1b2GgCdqnVOj8OKrK9lTgOEA9vBv5CQFN38/vH9z89fWeLd2hdIVjY7d7C/7FBQIlhrHVWsBPSesq4DZh93sVPi5cvCNDu45kxrNGnDlDlhTjdD7uRLs5Foml90r9rmpLY8FoQfjDRLUHmIKzkEFpRZ4gPPkqOCZdo8c3uI8V/KFnzxC8mlSsmbqqqwQSPaplCcfQtNvTUpOTs97YYXAJ+KA5k5gJQwzslp/E4TYBr8Bde6xD9PV9RoJFDV1PGDlgJZ7FzktJBt13BQXzrrSOc09USyNnQqnz46nS3xatIXWyge/6N/0IPV5fSrAg3KVny2YfA1GG++uf0MA55nYyvLniP6FeM30JL3NkYPu+otm9QRzkX7wc1WI+o7fTMYwPqEpCZ+jw6fU5y261dSP4R7Hp+7e1hTrGIYVLsFDk1WE2uxr4FYttNIqt3JCw7hxNl2oHzPisda4UyWJ4EKCsoLZNnbs/PAI/R6zCQrhsXDmajXC6MXTjutnxKqRrikpMCxDDvHZZpTC4TBARHHeu6+x/ho7/PolOx0GgS/Ig4Sku65g/RKSpxqMWlHf8DSuq/bi9EyXHJG3CkunWmruGRsKUIuutAhm4mx9kzHv85+31c=

Steps to reproduce

When using the Transition component, add the property apper= true and add the property appearToClass to wrap a component that uses the v-show directive in the component defaults to false, and then when the component is initialized, change v-show=true, and the class added by the appearToClass property will not disappear on the node all the time

What is expected?

correct

What is actually happening?

The appearToClass property remained

System Info

No response

Any additional comments?

No response

LinusBorg commented 1 year ago

these classes are not meant to stay on the element. they are added for one frame at the end, and removed right after the transition finishes. So this works as intended.

v-enter-to: Ending state for enter. Added one frame after the element is inserted (at the same time v-enter-from is removed), removed when the transition/animation finishes.

https://vuejs.org/guide/built-ins/transition.html#css-based-transitions

appear-to works the same.

cess123456 commented 1 year ago

Yes, these classes really shouldn't have been kept, but eventually he did, so this is a bug

cess123456 commented 1 year ago

image