directives/transition/

[giscus[bot]]

directives/transition/

Описание директивы x-transition в Alpine.js

https://alpinejs.dragomano.ru/directives/transition/

[tipodanet]

":leave-end Добавляется один кадр после срабатывания перехода выхода."
через ?

[dragomano]

Действительно, пропущено «через». Спасибо!

[tipodanet]

я все никак не отстану от вас : ":leave-end -- Добавляется через один кадр после срабатывания перехода выхода (одновременно с удалением leave-start), удаляется по завершении перехода/анимации." .
Имеется ввиду "после окончания :leave-start " ? Мне как то так понятнее .

[dragomano]

По логике да. Посмотрите в оригинальной документации, я мог что-нибудь пропустить. А лучше проверьте на практике :)

[tipodanet]

Не так часто можно увидеть грамотную "непрозрачность", которую называют "непрозрачность" )

[tipodanet]

Скажите, а как дать общее имя всем x-transitions из примера ?

[dragomano]

Как понять «общее имя»? И о каком примере речь? Если о самом последнем, то можно создать общий класс с CSS правилами и использовать его для всех вариантов x-transition, если используются одни и те же правила.

[tipodanet]

Но в примере уже использованы классы, пусть не чистый CSS, пусть Tailwind. Уже все сделано. Осталось только общее name для этого блока. Я же где-то читал у вас, что Alpine прямо обожает работать с блоками кода )
Что бы потом работало x-transitions name.
Но в данном примере блок name уже содержит x-transition. Значит, одного name уже должно быть достаточно для анимации другого элемента

[dragomano]

Есть ещё вариант с инкапсуляцией директив. Что-то вроде:

<div x-data="dropdown">
  <button x-bind="trigger">Переключить</button>
  <div x-show="open" x-bind="transitions">
    Привет👋
  </div>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('dropdown', () => ({
      open: false,

      trigger: {
        ['@click']() {
          this.open = !this.open;
        },
      },

      transitions: {
        'x-transition:enter': 'transition ease-out duration-300',
        'x-transition:enter-start': 'opacity-0 scale-90',
        'x-transition:enter-end': 'opacity-100 scale-100',
        'x-transition:leave': 'transition ease-in duration-300',
        'x-transition:leave-start': 'opacity-100 scale-100',
        'x-transition:leave-end': 'opacity-0 scale-90',
      },
    }));
  });
</script>

[tipodanet]

вот мне хочется вынести все директивы Alpine куда то в конец страницы, Чтобы применять их снаружи к любому объекту. Я понял, что это не работает. Я на animation все изучаю. Вот сделал, накопировал чужого кода.
AlpineJS .
Ничего вынести наружу не удалось.
jQuery оставлен для примера, т.к. с ним все понятно давно. jQuery дергается, придется ломать ему стандартные стили через JS . А a Alpine все компактно и ближе, и проще .

[tipodanet]

Спасибо за подробный ответ. Я медленно начинаю въезжать в принципы AlpineJS. Кажется , дальше этой страницы я Ваш сайт еще не изучал )).