当内容被 livewire 更新时，过渡一个 div 高度

Question

所以我们得到了一个 div 带有 Livewire 组件来选择语言 :

<div>
    @livewire('multiple-languages', [ ... ])
</div>

当用户在组件中选择一种语言时，它会更改其内容以提供更多可供选择的选项。顺带一提，内容变高了。我想为高度变化设置动画，以便提供更好的用户体验，而不是仅仅跳到适当的大小。

因为我也在使用 AlpineJS，所以我考虑过使用 https://alpinejs.dev/directives/transition 但到目前为止没有成功。纯 css 解决方案也可以。

Answer 1

为了能够使用转换，您可以使用前端 (AlpineJS) 来创建转换。这意味着您想让 Livewire 将数据传递给 Alpine，以便它可以发挥其前端魔力。

Livewire 组件：

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Str; 

class TestComponent extends Component
{
    public array $addons = [
        'test',
    ];

    public function render()
    {
        return view('livewire.test-component');
    }

    public function add()
    {
        $this->addons[] = Str::random(32);
        $this->dispatchBrowserEvent('change-event', ['addons' => $this->addons]);
    }
}

然后在blade文件中：

{{-- Use brackets with json_encode to escape double quotes; If you're using the newest version, you could also use @js($addons) --}}
<div x-data="{ addons: {{json_encode($addons)}} }">
    <div class="w-full p-4 rounded-lg border border-solid border-blue-500 mb-4 flex flex-wrap flex-row">
        <button class="btn btn-red" role="button" wire:click="add()">
            Click Me
        </button>
    </div>

    <div x-on:change-event.window="addons = $event.detail.addons"
         class="flex flex-wrap flex-row w-full">
        <template x-for="(addon, index) in addons" :key="index">
            <div class="p-4 w-full bg-white shadow-lg rounded-lg border-2 border-red-500 mb-5 mr-5"
                 x-data="{show: false}" x-init="$nextTick(() => {show = true} )"
                 x-show="show"
                 x-transition:enter="transition duration-500 transform"
                 x-transition:enter-start="opacity-0 -translate-x-full"
                 x-transition:enter-end="opacity-100 translate-x-0"
                 x-transition:leave="transition duration-1000 transform"
                 x-transition:leave-start="opacity-100 translate-x-0"
                 x-transition:leave-end="opacity-0 -translate-x-full">
                <div class="block">
                    <h3 x-html="addon" class="font-bold text-lg">

                    </h3>
                </div>
            </div>
        </template>
    </div>
</div>

备注：

由于您使用 AlpineJS 加载数据，因此您必须 fiddle 了解如何将潜在数据传回 Livewire。您很可能必须使用 $wire.emit.
重要的是要注意$nextTick。生成的模板没有转换。但是，如果您在 Alpine 更新 DOM 后更改显示状态，则转换将生效。对于我的烤面包机通知，我将通知添加到一个 array 中，该 array 在 x-show 中被选中（因此应用了转换）。
如果您在页面加载时添加数据（就像我在示例中所做的那样），那么初始数据也会有转换。

您可能仍需要 fiddle 进行转换，看看您觉得哪些方面不错，但希望这会让您朝着正确的方向前进！

当内容被 livewire 更新时，过渡一个 div 高度

Transition a div height when the content is updated by livewire

css

laravel

css-transitions

laravel-livewire

alpinejs