Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9Ul1P3DAQ/CuWpYpWInFKy0saEP0PffRLLtlwpv6SvQmcTvffWdu5cIDEm3dmPONd75H/9b5eZuAt7+IQlEcWAWd/L60y3gVkRxZgYic2BWfYFUmvpJV2cDaSdO+e2V0SfMcwww9pO1Fc6D4VCMbrHoEqxrp/oCFboruTfOfGg+QrE3obFSpnWe899IGBRQhVyqwG3cdIF1Ih+cr0A6oFNq6UG4tuY9CtIRQzqoUtlZoSTM8l+Vk1OGOcJeB+D1q7TpC0PE28ve1sI86NENCJix6pjHjQ6VgXR3ZMd7wrBi2b1AuMfxKmYcKWNfkc1ON+K0YVye9AWg0vGXmaI6rpUNHMkfpr2ZC7JO5EQflfcszOITrTsupn03xbWXTvuduNKSMrLG49tqzXOqe+YdU4h76QN03TmFgc6Ktzs/yal1WpTO/rp+gsLVO2lSsRJW9LUMJohVIt+R7Rx1aI2fr/j2lg4oE4EWaLykA1OvPwq76pf9/Sb0S8xGuIptoF9xwhUKLk1xfmgsCFliCAHSFA+DLsg/Zd4AfuU2jKpDmc+OkVZ2gjKg==

Steps to reproduce

on load transition does not end on from-to-class

What is expected?

transition stops mid screen

What is actually happening?

to class removed on transition end

System Info

using SFC playground 
chrome macos

Any additional comments?

No response

please refer to https://vuejs.org/guide/built-ins/transition.html#css-based-transitions modify minimal reproduction: https://sfc.vuejs.org/#eNp9Ustu2zAQ/BWCQJEWiEQ1bS6qEqT/0CMvtLSKmfIFcqXEMPzvWZK24yRAbpyZ3RkuuXv+N4R2XYD3fEhj1AFZAlzCvXTaBh+R7VmEmR3YHL1lV1R6JZ10o3eJSrf+md3lgu8YF/gh3SCqC/UTQLDBKARCjA3/wECxRH8n+cZPO8mLkrWoXNKovWMqBFCRgUOITU5tRqNSopYMJD8qakS9wlmr8GxIlpNe2dromcR8OWo81Y7eWu+IuN+CMX4QVHq6iHi7SaWIOd6b8CAuRiKYcGfysa2WbJ9bgq/9PZv1C0x/Mmdgxp515Rz14/YMJp3Ib0e1Bl4K87Qk1POuoSdGGrVnYxm4aBuP6G3PbrtvhA8UXL6lxJ605md3Ukmv71Ir8Dxaz5QxxfGNa6YlqiredF1nU/WgHy1D8mteN6KxKrRPyTvamWIrj0KSvK9BmaNNyVjyLWJIvRCLC/8f80OJB9JEXBxqC83k7cOv9qb9fUvfkPCSbyHZZhP9c4JIiZJfX5gLIlfagwhuggjxy7APte8CP2ifQnMmvcOBH14BE2gZKg==

i still dont think its working. It only happens to work due to the css ordering. Actually both classes are applied. if i take your example and move the .from class above the .common class it doesnt work again. Thats important because you might not have control over the ordering of css eg tailwind

https://sfc.vuejs.org/#eNp9Uttu2zAM/RVCwNANqC/r1hfPLbp/2KNeHJtu1OkGiXYbBPn3UlKSpi1Q+MXkOTyHpLgXf72v1wVFJ/o4BuUJItLi76VVxrtAsIeAMxxgDs7AFVOvpJV2dDYydeue4S4RvlNY8Ie0fVNUuJ4DQuP1QMgRQP8PNWZJcndSbNy0kyIjCQuDjYqUszB4j0MAtIShSq7VqIcYuSQFUhyRYSS14hkr4VmQJSe1wlqpmcHUHBeeuKMzxllO3G9Ra9c3TD010rx1UlKcOfbNcd9cjMRhpJ0u09V5P/v0u3FEznRQ/Wzbb3+kPUhbF8uCe1f0O5jVC07MANA4Uwdt/g/qcXsOJhXZb8dcjS8587REUvOu4icgXkUHY15Ixk7Wtyfj9NVlN8WczuN1MGidq95y1bSEoYA3bduaWFT4VfOg4lqUq6jM4Oun6CzfTZaVRyBK0RWjlONrSbEUWyIfu6ZZrP//mJbRPDDWhMWSMlhNzjz8qm/q37f8FJEu8zVGU22Ce44Y2FGK6wvxhpMr30JAO2HA8KXZB+47ww/YJ9PkyXs4iMMrfeQaNA==

enter-to-class is not applied continuously, only for a tick at the end. the proposed solution is correct. If you have CSS order issues, make the from class of higher specificity. And yes, with tailwind that means you would have to create a class with @apply in this specific case. In others, whe the transitioned value is inherited/default (i.e. opacity: 1, you would not have to do that.

Okay. Thanks for your explanation. Feels like it needs one more css class for after like from-class, from-to-class, "from-to-after". Im not sure the point of from-to-class removing on transition end but yeah relying on css specificity for Transition component is not ideal.

The actual use case is a slide up menu from the bottom of the screen in mobile view