当内容被livewire更新时，转换div高度

Question

因此，我们得到了一个带有Livewire组件的div来选择语言：

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

当用户在组件中选择语言时，它会更改其内容以提供更多可供选择的选项。顺便说一句，内容变得更高。我想动画的高度变化，所以它提供了一个更好的UX，而不是只是跳到它的适当的大小。

由于我也在使用AlpineJS，所以我考虑使用https://alpinejs.dev/directives/transition，但到目前为止没有成功。一个纯css解决方案也会很好。

Answer 1

为了能够利用转换，您可以使用前端(AlpineJS)来创建转换。这意味着你想让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]);
    }
}

然后在刀片文件中：

{{-- 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加载数据，您将不得不摆弄如何将潜在的数据传递回Livewire。很可能您将不得不使用$wire.emit。
• 注意$nextTick是很重要的。生成的模板没有转换。但是，如果在阿尔卑斯更新DOM之后更改了显示状态，则转换将生效。对于烤面包机通知，我将通知添加到array中，该通知将在x-show中签入(从而应用转换)。
• 如果在页面加载中添加数据(就像我在示例中所做的那样)，那么初始数据也会有转换。

你可能还需要在过渡中摆弄一下，看看什么看起来不错，但希望这会让你走上正确的方向！