Директива wire:transition

Директива wire:transition используется для применения анимации к элементам, которые динамически добавляются или удаляются из DOM в процессе работы Livewire. Она позволяет сделать интерфейс более плавным и визуально приятным для пользователя.

Синтаксис

<div wire:transition="fade">
	Content
</div>

Пример

Давайте покажем и скроем блок с анимацией затухания по клику:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $show = false;
		
		public function toggle()
		{
			$this->show = !$this->show;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button wire:click="toggle">
		Toggle
	</button>
	@if ($show)
		<div wire:transition="fade">
			Fade content
		</div>
	@endif
</div>

Результат выполнения кода:

<div>
	<button>
		Toggle
	</button>
	<div>
		Fade content
	</div>
</div>

Пример

Давайте добавим список элементов и будем удалять их с анимацией:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ListComponent extends Component
	{
		public $items = ['a', 'b', 'c'];
		
		public function removeItem($index)
		{
			unset($this->items[$index]);
			$this->items = array_values($this->items);
		}
		
		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<div>
	@foreach ($items as $key => $item)
		<div wire:transition="slide" wire:key="{{ $key }}">
			<span>{{ $item }}</span>
			<button wire:click="removeItem({{ $key }})">x</button>
		</div>
	@endforeach
</div>

Результат выполнения кода:

<div>
	<div>
		<span>a</span>
		<button>x</button>
	</div>
	<div>
		<span>b</span>
		<button>x</button>
	</div>
	<div>
		<span>c</span>
		<button>x</button>
	</div>
</div>

Пример

Давайте используем пользовательскую анимацию с классами:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CustomTransition extends Component
	{
		public $visible = false;
		
		public function toggle()
		{
			$this->visible = !$this->visible;
		}
		
		public function render()
		{
			return view('livewire.custom-transition');
		}
	}
?>

<div>
	<button wire:click="toggle">
		Toggle
	</button>
	@if ($visible)
		<div 
			wire:transition="custom"
			wire:transition.enter="animate-enter"
			wire:transition.leave="animate-leave"
		>
			Custom animation
		</div>
	@endif
</div>

Результат выполнения кода:

<div>
	<button>
		Toggle
	</button>
	<div>
		Custom animation
	</div>
</div>

Смотрите также

директиву wire:click,
которая обрабатывает клики по элементу
директиву wire:show,
которая управляет видимостью элемента
директиву wire:loading,
которая управляет индикацией загрузки
директиву wire:dirty,
которая отслеживает изменения данных