DEV.RULES
Digital agency
129
Laravel

Alpine.js анимация приветствия пользователя

От Святослав Торн, публикация от 31 August, 2020

Просто расположу тут рабочий пример и немного поясню:

@extends('frontend.layouts.main')
@section('content')

<div    x-data="{ hello: false, action: false }"
        x-init="window.onload = function(){
            hello = true;
            setTimeout(() => {
                hello = false;
                setTimeout(() => {  action = true }, 600);
            }, 4000);
        };"
        class="overflow-hidden flex w-full h-full items-center justify-center">

    <div    x-show="hello"
            x-transition:enter="transition ease-in-out duration-1500"
            x-transition:enter-start="opacity-0 transform scale-90 -translate-y-0"
            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-500"
            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 transform scale-90 -translate-y-0"
            class="text-center " style="display: none">
        <div class="font-thin text-3xl text-gray-600">
            Доброе утро!
        </div>
        <div class="font-medium text-4xl">
            Святослав Игоревич
        </div>
        <div>
            <style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;height: 100px;background: transparent url(http://hello-site.ru//main/images/preloads/tail-spin.svg) center center no-repeat;background-size:60px;}</style>
            <div id="hellopreloader"><div id="hellopreloader_preload"></div></div>
            <script type="text/javascript">var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1);};</script>

        </div>
    </div>


    <div    x-show="action"
            x-transition:enter="transition ease-in-out duration-1000"
            x-transition:enter-start="opacity-0 transform scale-90 -translate-y-0"
            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-500"
            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 transform scale-50 -translate-y-full"
            class="text-center " style="display: none">
        <div class="font-thin text-4xl text-gray-500 mb-4">
            С чего начнем?
        </div>
        <div class="flex flex-col w-full text-gray-700">
            <div class="btn-action">Ссылка 1</div>
            <div class="btn-action">Ссылка 2</div>
            <div class="btn-action">Ссылка 3</div>
            <div class="btn-action">Ссылка 4</div>
        </div>
    </div>


</div>
@endsection

Объявляем "флаги" наших экранов, сколько экранов столько флагов (в x-data).

<div    x-data="{ hello: false, action: false }"
        x-init="window.onload = function(){
            hello = true;
            setTimeout(() => {
                hello = false;
                setTimeout(() => {  action = true }, 600);
            }, 4000);
        };"
        class="overflow-hidden flex w-full h-full items-center justify-center">

Выше видно что в x-init распологается JS код. В этом атрибуте мы може писать нашу JS лапшу. 

Любой наш появляющийся блок должен иметь следующие alpine.js директивы:

<div        x-show="action"
            x-transition:enter="transition ease-in-out duration-1000"
            x-transition:enter-start="opacity-0 transform scale-90 -translate-y-0"
            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-500"
            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 transform scale-50 -translate-y-full"
            class="text-center " style="display: none">

</div>

x-show - имя нашего флага для управления появлением, все остальное это директивы описывающие состояние css классов  на разных этапах анимации.