[LiveComponent] css Transition

[tito10047]

Hi, I want create Css transitions in my application when live component change.
Is there way to do this?

Im do this, its working bur I don't know if its correct:

//assets/controllers/transition_controller.js
import { Controller } from '@hotwired/stimulus';
import { getComponent } from '@symfony/ux-live-component';
import { shouldPerformTransition, performTransition } from 'turbo-view-transitions';

export default class extends Controller {
    recursive=false;
    async initialize() {
        this.component = await getComponent(this.element);

        this.component.on('render:started', (html, response, controls) => {
            if (!shouldPerformTransition()) {
                return;
            }
            if (this.recursive) {
                return;
            }
            controls.shouldRender = false;
            let div = document.createElement('div');
            div.innerHTML = html.trim();
            let newElement = div.firstChild;
            performTransition(this.element, newElement,  () => {
                this.recursive = true;
                this.component.processRerender(newElement.outerHTML, response);
                this.recursive = false;
            });
        });
    }
}