Transition: Reusable/Wrapped Transition not working - Githubissues

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

https://vuejs.org/

MIT License

47.7k stars 8.33k forks source link

Transition: Reusable/Wrapped Transition not working #6081

Open benjaminrobinet opened 2 years ago

benjaminrobinet commented 2 years ago

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbiAgaW1wb3J0IE15VHJhbnNpdGlvbiBmcm9tIFwiLi9NeVRyYW5zaXRpb24udnVlXCI7XG4gIGltcG9ydCB7IHJlZiwgY29tcHV0ZWQgfSBmcm9tIFwidnVlXCI7XG4gIFxuICBjb25zdCBkYXRhID0gcmVmKFt7Y29udGVudDogJzxwPkFCQzwvcD4nfSwge2NvbnRlbnQ6ICc8cD5ERUY8L3A+PHA+R0hJPC9wPid9XSlcbiAgY29uc3QgY3VycmVudERhdGFJbmRleCA9IHJlZigwKTtcbiAgY29uc3QgY3VycmVudERhdGEgPSBjb21wdXRlZCgoKSA9PiB7XG5cdFx0cmV0dXJuIGRhdGEudmFsdWVbY3VycmVudERhdGFJbmRleC52YWx1ZV07XG4gIH0pXG4gIFxuICBcbiAgc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgIGN1cnJlbnREYXRhSW5kZXgudmFsdWUgPSAoY3VycmVudERhdGFJbmRleC52YWx1ZSArIDEpICUgKGRhdGEudmFsdWUubGVuZ3RoKTtcbiAgfSwgMTAwMCk7XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8ZGl2PlxuICAgIDxUcmFuc2l0aW9uIG5hbWU9XCJmYWRlXCIgbW9kZT1cIm91dC1pblwiPlxuICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCIgdi1pZj1cImN1cnJlbnREYXRhXCIgOmtleT1cImN1cnJlbnREYXRhXCI+XG4gICAgICAgICA8ZGl2IHYtaHRtbD1cImN1cnJlbnREYXRhLmNvbnRlbnRcIj48L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvVHJhbnNpdGlvbj5cbiAgICA8aHIvPlxuICAgIDxNeVRyYW5zaXRpb24+XG4gICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIiB2LWlmPVwiY3VycmVudERhdGFcIiA6a2V5PVwiY3VycmVudERhdGFcIj5cbiAgICAgICAgIDxkaXYgdi1odG1sPVwiY3VycmVudERhdGEuY29udGVudFwiPjwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9NeVRyYW5zaXRpb24+IFxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZT5cbiAgLmZhZGUtZW50ZXItYWN0aXZlLFxuICAuZmFkZS1sZWF2ZS1hY3RpdmUge1xuICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjNzIGxpbmVhcjtcbiAgfVxuXG4gIC5mYWRlLWVudGVyLWZyb20sXG4gIC5mYWRlLWxlYXZlLXRvIHtcbiAgICAgIG9wYWNpdHk6IDA7XG4gIH1cbjwvc3R5bGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwiZ3NhcFwiOiBcImh0dHBzOi8vdW5wa2cuY29tL2dzYXA/bW9kdWxlXCIsXG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNy9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM3L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIk15VHJhbnNpdGlvbi52dWUiOiI8dGVtcGxhdGU+XG4gIDxUcmFuc2l0aW9uIG5hbWU9XCJmYWRlXCIgbW9kZT1cIm91dC1pblwiPlxuICAgIDxzbG90Lz5cbiAgPC9UcmFuc2l0aW9uPlxuPC90ZW1wbGF0ZT5cbjxzY3JpcHRcdHNldHVwPlxuICBcbjwvc2NyaXB0PlxuPHN0eWxlPlxuPC9zdHlsZT4ifQ==

Steps to reproduce

Create a component wrapping a Transition

What is expected?

Run transition on slots

What is actually happening?

No transitions

System Info

No response

Any additional comments?

No response

benjaminrobinet commented 2 years ago

@bbcvc Isn't the minimal reproduction enough to guess ? I guess the problem is I'm using a ref as element key. But I don't know why it's not working when wrapping the component.