The Transition does not take effect when using conditional judgment on the diff element in the render function.

[Innei]

Vue version

3.3.8

Link to minimal reproduction

https://play.vuejs.org/#eNqNVF1P2zAU/St3eUmRmmQSQpqywmAVk7aHMW085sUkt43BsS3bCSDU/75rh3y0ZWh9aHLP9Tn303mJrrROuxajPFrZ0nDtwKJrNQgmt+dF5GwRXRSSN1oZBy9Q4YZLXCuyJUq3BIObJdwaJi13XMkl1LCDjVENxCQbF7KQpZLWgdIo4dyfX2yYsHjiXYNzFKQTByEWL4WEPqnFCZDhTSAd1xoJBJ1feNRjI1ovBgDmuU3gSPC/LAOKg+YbZb0WzNocikjpJICJr6WIZtyJcFU63uExhQX8mCSQdXhMCvD7pFt1THCqiOZnJWswh1hpavqA7WZqH/wE0o6JFuHLnFgvYquZjJcQ38QnQEHedq7JObhoekHfP+hvF6a5yvoVooUhw2GjBXNIFsBqmnDWA7UZ3u5a55SEy1Lw8oF2rp/p676ErMMOhmGq7VZgYGU9LcTak5sGHlpCgkqPAitfDHQJ3wTcS0PpW0sml4IWL7kTqnyAOjmDx+SMiDdUFpH2BN6nkD7Shl+sZ8xVNuVFwCqbtYdM656Ff00Plojm56H5ivTL60a1nFrFSu6e4WN6ZgGZxc80ES87qfkt3tNyqtd55ebwsSdRyiGVaBn1lz5pmE7vrZL0iQgMqjo46MuQDxepiOiye7uIaue0zbOsrCTRKhS8M6lEl0ndZJd0LDOtdLzBpFLN5Wl6mn7KKm7dHE7RNsmdUY8WTaqNqkhpvBkhVkaejuoyKCs0aP439gFtHv/AtZeDDz+sOnXGWfpsbfj2oC8l7TgXaG60n8t+f5gQ6vFHwJxp/Vx7vKyxfHgDv7dPfU2/DIbMZvU7Zrboevf1n5/4RO+js1FVS1fkPedvtEq0Psf+2NdWVpT27FzI9nsYM5fbW3v95JDW7bUon2joRjgf5uGv979Kn9Klbo9d3P0FqAsXVQ==

CleanShot.2023-11-14.at.12.12.44.mp4

Steps to reproduce

1. click toggle button
2. The one above didn't work. The one below, written with sfc, works.

What is expected?

1. all should works

What is actually happening?

1. component written in render function not working

System Info

No response

Any additional comments?

No response

[baiwusanyu-c]

https://play.vuejs.org/#eNqNU81uEzEQfpXBl6RSslupQkJLWgpVD3CgCHrDHNzdSeJ217Zsb9ooisQdiQsvw4mnAZ6DsZ1sNlFBKFLW/mbmm29+vGIvjckWLbKCTVxppfHg0LcGaqFmp5x5x9kZV7Ix2npYQYVTqfBC012h8iOwOB3BtRXKSS+1GsEc1jC1uoEB0Q64KrVyHrRBBafBezgVtcMjrsIvGTs68jhIMFxxBUnS8AjoEq5APL61Cgg6PQtowNJ/Z5sP+6pWoESDBXCmDWewJmTrDyGnaGtfbPg+7izDoDtbiLoNircowAsgfs6cEYoz4rrDZQGDX9++DoiZsyvO9tyLR91/f/nx8/vnFHGxF/Fpe1x3YPquw4f+As7VJE8jowHRxWNjauGRbgCTXU/zBMzt9nTTeq8VnJe1LO9oxqnqzYSehG+cech3rWezGmNUnsJirj26XZtjj4kwtHhDMAk1w2IspxGP1Fekm9ADD6StOLvomSb5jpmASd4rkK7OL+twzLQZU5lox6L0coGjBNUoFriB0qx9x1ZQsaKUfgnH2VMHKBw+p54G2h1b2OE9Lq8Tzya2gOMURJKjFDZi6ZmMG2GyW6cVPaoYwTcGektFt62Mnke4czb33rgiz8tKUViFtVzYTKHPlWnyc3LLbau8bHBc6eb8JDvJnuWVdL4PZ+ia8Y3V9w5tZqyuiIlWrZcrJ8uC6rKoKrRo/zf3QVg//4FpT0NIv11W6ox39NSncnbQl5K2VNZor0yYy35/RF3r+zcR87YNc014Ocfy7hH81j2kmt5ZjMp69XthZ+iT+fLDW3ygc2dsdNXSkv/L+B6drtugMbm9alVFsnt+Ue3rOGapZtfu8sEjrdumqCA0diP6x3mEB/q30ndyqdtdF9d/APNE3DQ=

This is equivalent to implementing the runtime code generated by the compiler yourself, so you need to add key

[Innei]

In the above example, I used the h function without adding a key, which caused a problem. I understand that a key needs to be added during the compilation process. So it is reasonable to add a key manually here.

However, if written in tsx , tsx should go through compilation and still not work.

           <Transition
              name="rotate"
            
            >
              {!isDark.value ? (
                <i
                  
                  class={'inline-block h-5 w-5 i-mingcute-sun-line'}
                />
              ) : (
                <i
                 
                  class={'inline-block h-5 w-5 i-mingcute-moon-line'}
                />
              )}
            </Transition>

[Innei]

https://vue-jsx.sxzz.moe/#PFRyYW5zaXRpb24KICAgICAgICAgICAgIG5hbWU9InJvdGF0ZSIKICAgICAgICAgICAgIAogICAgICAgICAgICA+CiAgICAgICAgICAgICAgeyFpc0RhcmsudmFsdWUgPyAoCiAgICAgICAgICAgICAgICA8aQogICAgICAgICAgICAgICAgICBjbGFzcz17J2lubGluZS1ibG9jayBoLTUgdy01IGktbWluZ2N1dGUtc3VuLWxpbmUnfQogICAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgICApIDogKAogICAgICAgICAgICAgICAgPGkKICAgICAgICAgICAgICAgICAgY2xhc3M9eydpbmxpbmUtYmxvY2sgaC01IHctNSBpLW1pbmdjdXRlLW1vb24tbGluZSd9CiAgICAgICAgICAgICAgICAvPgogICAgICAgICAgICAgICl9CiAgICAgICAgICAgIDwvVHJhbnNpdGlvbj4=

[baiwusanyu-c]

This issue may be converted to @vue/babel-plugin-jsx