Прелази и анимације играју велику улогу у корисничком искуству. Додавањем суптилних анимација и прелаза између елемената на веб страници можете побољшати корисничко искуство. Веб локација ће изгледати много глаткија, занимљивија и генерално боља.

Овај водич показује како да имплементирате прелазе и анимације у Вуе.јс. Научићете како да креирате и једноставне прелазе и сложене анимације користећи прелаз компонентни и ЦСС кључни кадрови.

Компонента транзиције Вуе.јс

Вуе.јс има уграђену прелаз компонента која вам омогућава да креирате анимације у вашој апликацији. Ова компонента се обавија око циљног елемента који желимо да анимирамо.

Овде компонента транзиције обавија заглавље првог нивоа:

 Здраво </h1>
</transition>

Када умотате елемент са прелаз компонента, компонента ће применити прелазне класе на елемент који обавија. Укупно има шест прелазних разреда. Три контролишу анимацију елемента док улази на страницу. Остала три контролишу анимацију елемента док напушта страницу.

Код који се користи у овом чланку доступан је у овом ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.

Примена прелазних класа када елементи уђу на страницу

Током процеса уласка елемента у ДОМ, прелаз компонента примењује класе ентер-фром, ентер-то, и ентер-активан на то. Ове класе вам омогућавају да контролишете како ће елемент анимирати или прећи на страницу.

• ентер-фром: Примењује се на елемент пре него што уђе у прегледач. Ову класу користите за постављање почетног ЦСС стања елемента.
• ентер-то: Примењује се на елемент док улази у прегледач. Ову класу користите за постављање коначног ЦСС стања елемента.
• ентер-активан: Примењује се док елемент прелази из једног стања у друго. Овде диктирате колико ће трајати транзиција.

Хајде да видимо пример:

<прелаз>
 <х1> Здравох1>
прелаз>
.унесите-из {
непрозирност: 0;
}
.ентер-то {
непрозирност: 1;
}
.ентер-активан {
прелаз: непрозирност 2сублажити, лакоца;
}

Са овим кодом, заглављу првог нивоа потребно је две секунде да пређе из невидљивог (непрозирност: 0) да се потпуно види (непрозирност: 1). Овај прелаз се дешава када елемент уђе у ДОМ. Без прелаза, текст би се одмах појавио у претраживачу када се страница учита.

Примена прелазних класа када елементи напусте страницу

Тхе прелаз компонента подржава три друге прелазне класе које треба да примените када елемент напушта ДОМ. Њихова имена су изаћи из, препустити, и остави-активан. Ове класе контролишу како ће елемент анимирати или прећи са странице.

Као што сте могли да претпоставите, ови часови су слични унесите- класе о којима смо раније говорили. Али ове класе се активирају само када се елемент спрема да се искључи из ДОМ-а. Монтирање и демонтажа су важни концепти ДОМ-а. Као програмер, требало би да имате а основно разумевање ДОМ-а и други сродни појмови.

Хајде да видимо пример:

<прелаз>
 <х1> Здравох1>
прелаз>
.изаћи из {
непрозирност: 0;
}
.препустити {
непрозирност: 1;
}
.остави-активан {
прелаз: непрозирност 2сублажити, лакоца;
}

У овом случају, заглављу првог нивоа потребно је две секунде да полако пређе са видљивог (непрозирност: 1) до невидљивог (непрозирност: 0). Овај прелаз се дешава када елемент напусти ДОМ. Без прелаза, текст би тренутно нестао из претраживача.

Коришћење назива прелаза

Такође можете додати а име приписати вашој транзиционој компоненти. Када то урадите, Вуе ће додати име вашим прелазним класама. То значи да можете имати више прелаза на својој страници, сваки са јединственим класама прелаза и ЦСС својствима.

На пример, ако подесите име избледети на вашој транзиционој компоненти, онда ће све прелазне класе имати префикс са избледети:

<прелазиме ="избледети">
 <х1> Здравох1>
прелаз>
.фаде-ентер-фром {
непрозирност: 1;
}
.фаде-леаве-фром {
непрозирност: 1;
}
// друго "ући" и "оставити" класесатхеизбледетикаопрефикс

Креирање прелаза помоћу компоненте прелаза

Да бисте демонстрирали прелаз у Вуе.јс, умотаћете датотеку Х1 у оквиру прелаз саставни део. Испод, направићете дугме. Када се кликне на ово дугме, мења променљиву сховТитле између лажно и истина.

Ево кода:

Затим дефинишите скрипта одељак. Овај одељак садржи подесити метод где иницијализујете сховТитле променљива са лажно.