Property changed transition effect with html `{{!! $html !!}`

Question

I'm trying to make a transition effect to text in livewire & laravel

It is working with {{ $html }}:

<p class="text-gray-600"  x-data="{show: false}" x-show.transition.duration.1000ms="show" x-init="setTimeout(() => { show = true })" id="{{ $slide['current']['id'] }}c">{{ '<h1>hi</h1>' }}</p>

but it didn't work with {!! $html !!}}:

<p class="text-gray-600"  x-data="{show: false}" x-show.transition.duration.1000ms="show" x-init="setTimeout(() => { show = true })" id="{{ $slide['current']['id'] }}c">{!! '<h1>hi</h1>' !!}</p>

Answer 1

You can't put an <h1> inside a <p> element. The browser will move it out.

so i must add it in a <div>

<div class="text-gray-600"  x-data="{show: false}" x-show.transition.duration.1000ms="show" x-init="setTimeout(() => { show = true })" id="{{ $slide['current']['id'] }}c">{!! '<h1>hi</h1>' !!}</div>