属性用 html `{{!! $html !!}`答案

【问题标题】：Property changed transition effect with html `{{!! $html !!}`属性用 html `{{!! $html !!}`
【发布时间】：2023-04-09 04:48:01
【问题描述】：

我正在尝试为 livewire 和 laravel

中的文本制作过渡效果

它正在使用{{ $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>

但它不适用于{!! $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>

【问题讨论】：

尽量不要将 HTML 用单引号括起来
仍然无法正常工作@apokryfos

标签： html css laravel laravel-livewire alpine.js

【解决方案1】：

您不能将<h1> 放在<p> 元素中。浏览器会移动出来吧。

所以我必须将它添加到<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>

【讨论】：