Komponowalna animacja CSS w Vue z AnimXYZ

W tym artykule dowiesz się, jak używać zestawu narzędzi AnimXYZ do tworzenia unikalnych, interaktywnych i atrakcyjnych wizualnie animacji w Vue.js i zwykłym HTML. Pod koniec tego artykułu dowiesz się, jak dodanie kilku klas CSS do elementów w komponentach Vue.js może dać ci dużą kontrolę nad tym, jak te elementy poruszają się w DOM.

Ten samouczek przyda się czytelnikom zainteresowanym tworzeniem interaktywnych animacji z kilkoma linijkami kodu.

Uwaga : ten artykuł wymaga podstawowej wiedzy na temat Vue.js i CSS.

Co to jest AnimXYZ?

AnimXYZ to komponowalny, wydajny i konfigurowalny zestaw narzędzi do animacji CSS oparty na zmiennych CSS. Został zaprojektowany, aby umożliwić tworzenie niesamowitych i unikalnych animacji bez pisania linii klatek kluczowych CSS. Pod maską wykorzystuje zmienne CSS do tworzenia niestandardowych właściwości CSS. Miłą rzeczą w AnymXYZ jest deklaratywne podejście. Element można animować na dwa sposoby: podczas wchodzenia lub opuszczania strony. Jeśli chcesz animować element HTML za pomocą tego zestawu narzędzi, dodanie klasy xyz-out spowoduje animację elementu poza stroną, podczas gdy xyz-in spowoduje animację komponentu na stronie.

Ten niesamowity zestaw narzędzi może być używany w zwykłym projekcie HTML, a także w aplikacji Vue.js lub React. Jednak w momencie pisania tego tekstu wsparcie dla React jest wciąż w fazie rozwoju .

Dlaczego warto korzystać z AnimXYZ?

Komponowalne

Animacja za pomocą AnimXYZ jest możliwa dzięki dodaniu opisowych nazw klas do znaczników. Ułatwia to pisanie złożonych animacji CSS bez pisania złożonych klatek kluczowych CSS . Animowanie elementu na stronie jest tak proste, jak dodanie klasy xyz-in w komponencie i zadeklarowanie opisowego atrybutu.

 <p class="xyz-in" xyz="fade">Composable CSS animation with AnimXYZ</p>

Powyższy kod sprawi, że element akapitu zniknie na stronie, podczas gdy poniższy kod sprawi, że element zniknie ze strony. Tylko jedna klasa z dużą mocą.

 <p class="intro xyz-out" xyz="fade">Composable CSS animation with AnimXYZ</p>

Konfigurowalny

W przypadku prostych animacji możesz użyć gotowych narzędzi, ale AnimXYZ może zrobić o wiele więcej. Możesz dostosować i kontrolować AnimXYZ, aby tworzyć dokładnie takie animacje, jakie chcesz, ustawiając zmienne CSS, które sterują wszystkimi animacjami AnimXYZ. W dalszej części tego samouczka stworzymy kilka niestandardowych animacji.

Wydajny

Dzięki AnimXYZ możesz tworzyć potężne i płynne animacje po wyjęciu z pudełka, a jego rozmiar to tylko 2,68 KB dla podstawowej funkcjonalności i 11,4 KB, jeśli dodasz wygodne narzędzia.

Łatwy do nauczenia i użytkowania

AnimXYZ doskonale współpracuje ze zwykłym kodem HTML i CSS i można go zintegrować z projektem za pomocą łącza sieci dostarczania treści (CDN). Może być również używany w Vue.js i React, chociaż wsparcie dla Reacta jest wciąż w fazie rozwoju. Ponadto krzywa uczenia się z tym zestawem narzędzi nie jest stroma w porównaniu z bibliotekami animacji, takimi jak GSAP i Framer Motion, a oficjalna dokumentacja ułatwia rozpoczęcie pracy, ponieważ w prosty sposób wyjaśnia, jak działa pakiet.

Kluczowe pojęcia w AnimXYZ

Konteksty

Gdy chcesz, aby określony przepływ animacji został zastosowany do powiązanych grup elementów, atrybut xyz zapewnia kontekst. Załóżmy, że chcesz, aby trzy elementy div były animowane w ten sam sposób, gdy wchodzą na stronę. Wszystko, co musisz zrobić, to dodać atrybut xyz do elementu nadrzędnego wraz z narzędziami do komponowania i zmienną, które chcesz zastosować.

 <div class="shape-wrapper xyz-in" xyz="fade flip-up flip-left"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div>

Powyższy kod zastosuje tę samą animację do wszystkich elementów div z klasą shape . Wszystkie elementy potomne znikną na stronie i odwrócą się w lewy górny róg, ponieważ atrybut xyz="fade flip-up flip-left" został zastosowany do elementu nadrzędnego.

AnimXYZ ułatwia animowanie elementu podrzędnego inaczej niż jego rodzica. Aby to osiągnąć, dodaj atrybut xyz z inną zmienną animacji i różnymi narzędziami do elementu potomnego, który zresetuje wszystkie właściwości animacji, które odziedziczył po rodzicu.

Narzędzia

AnimXYZ zawiera wiele narzędzi, które pozwolą Ci tworzyć wciągające i potężne animacje CSS bez pisania niestandardowych CSS.

 xyz="fade up in-left in-rotate-left out-right out-rotate-right"

Na przykład, powyższy kod ma narzędzie fade up , które sprawi, że element będzie zanikał od góry do dołu podczas wchodzenia na stronę. Wejdzie i obróci się z lewej strony. Gdy element opuści stronę, przejdzie w prawo i wyjdzie poza stronę.

Dzięki gotowym narzędziom możesz, powiedzmy, odwrócić grupę elementów w prawo i sprawić, by wyblakły podczas opuszczania strony. Możliwości tego, co można osiągnąć za pomocą narzędzi, są nieograniczone.

Oszałamiający

Narzędzie stagger kontroluje właściwość CSS animation-delay dla każdego elementu na liście, dzięki czemu ich animacje są uruchamiane jedna po drugiej. Określa czas oczekiwania między zastosowaniem animacji do elementu a rozpoczęciem wykonywania animacji. Zasadniczo służy do kolejkowania animacji, dzięki czemu elementy mogą być animowane po kolei.

 <div class="shape-wrapper" xyz="fade up-100% origin-top flip-down flip-right-50% rotate-left-100% stagger"> <div class="shape xyz-in"></div> <div class="shape xyz-in"></div> <div class="shape xyz-in"></div> <div class="shape xyz-in"></div> </div>

Dodając narzędzie stagger , każdy element w nadrzędnym div będzie animowany jeden po drugim od lewej do prawej. Kolejność można czcić za pomocą stagger-rev .

Z stagger :

Bez stagger :

Używanie AnimXYZ z HTML i CSS

Zbudujmy kartę i dodajmy fajną animację z AnimeXYZ.

Najpierw musimy dodać zestaw narzędzi AnimXYZ do naszego projektu. Najłatwiej jest przez CDN. Chwyć CDN i dodaj go do head swojego dokumentu HTML.

Dodaj następujące wiersze kodu do kodu HTML.

 <p class="intro xyz-in" xyz="fade">Composable CSS Animation with Animxyz</p> <div class="glass xyz-in" xyz="fade flip-down flip-right-50% duration-10"> <img src="https://cdn.dribbble.com/users/238864/screenshots/15043450/media/7160a9f4acc18f4ec2cbe38eb167de62.jpg" alt="" class="avatar xyz-in"> <p class="des xyz-in">Image by Jordon Cheung</p> </div>

Tutaj dzieje się magia. Na górze strony mamy tag paragrafu z klasą xyz-in oraz atrybut xyz o wartości fade . Oznacza to, że element p zniknie na stronie.

Następnie mamy kartę z id glass , z następującym atrybutem xyz :

 xyz="fade flip-down flip-right-50% duration-10"

Powyższe narzędzia do komponowania sprawią, że karta zniknie na stronie. Wartość flip-down spowoduje odwrócenie karty na stronę od dołu, a wartość flip-right odwróci kartę o 50% przy opuszczaniu strony. Czas trwania animacji wynoszący 10 (tj. 1 sekunda) określa czas, jaki zajmie animacja ukończenia jednego cyklu.

Integracja AnimXYZ w Vue.js

Zbuduj projekt Vue.js

Korzystając z interfejsu wiersza poleceń (CLI) Vue.js, uruchom poniższe polecenie, aby wygenerować aplikację:

 vue create animxyz-vue

Zainstaluj VueAnimXYZ

 npm install @animxyz/vue

Spowoduje to zainstalowanie zarówno pakietu podstawowego, jak i pakietu Vue.js. Po instalacji będziemy musieli zaimportować pakiet VueAnimXYZ do naszego projektu i dodać wtyczkę globalnie do naszej aplikacji Vue.js. Aby to zrobić, otwórz plik main.js i odpowiednio dodaj następujący blok kodu:

 import VueAnimXYZ from '@animxyz/vue' // import AnimXZY vue package import '@animxyz/core' // import AnimXZY core package Vue.use(VueAnimXYZ)

Komponent XyzTransition

Komponent XyzTransition jest zbudowany na komponencie transition Vue.js. Służy do animowania poszczególnych elementów na stronie i poza nią.

Oto demonstracja korzystania z komponentu XyzTransition w Vue.js.

Zauważ, że duża część złożoności, która jest związana z komponentem transition Vue.js, została wyabstrahowana w celu zmniejszenia złożoności i zwiększenia wydajności. Jedyne, o co musimy dbać podczas korzystania z komponentu XyzTransition , to właściwości: appear , appear-visible , duration i mode .

Aby uzyskać bardziej szczegółowy przewodnik, zapoznaj się z oficjalną dokumentacją.

Użyjmy składnika XYZTransition , aby animować element po kliknięciu przycisku.

 <div> <button @click="isAnimate = !isAnimate">Animate</button> <XyzTransition appear xyz="fade up in-left in-rotate-left out-right out-rotate-right" > <div class="square" v-if="isAnimate"></div> </XyzTransition> </div>

Zwróć uwagę, jak element, który zamierzamy przenieść, jest opakowany w składnik XYZTransition . Jest to ważne, ponieważ element potomny <div class="square" v-if="isAnimate"></div> odziedziczy narzędzia zastosowane do komponentu XYZTransition . Element potomny jest również renderowany warunkowo, gdy isAnimate ma wartość true . Po kliknięciu przycisku element potomny z klasą square jest przełączany do iz DOM.

XyzTransitionGroup

Komponent XyzTransitionGroup jest zbudowany na bazie komponentu transition-group Vue.js. Służy do animowania grup elementów na stronie i poza nią.

Poniżej znajduje się ilustracja, jak używać komponentu XyzTransitionGroup w Vue.js. Zwróć uwagę, że duża część złożoności, która towarzyszy komponentowi transition-group Vue.js, została wyabstrahowana w celu zmniejszenia złożoności i zwiększenia wydajności. Jedyne, o co musimy zadbać podczas korzystania ze składnika XyzTransitionGroup , to appear , appear-visible , duration i tag . Z dokumentacji zaczerpnięto:

 <XyzTransitionGroup appear={ boolean } appear-visible={ boolean | IntersectionObserverOptions } duration={ number | 'auto' | { appear: number | 'auto', in: number | 'auto', out: number | 'auto' } } tag={ string } > <child-component /> <child-component /> <child-component /> </XyzTransitionGroup>

Zbuduj animowany modal za pomocą AnimXYZ i Vue.js

Zbudujmy komponenty modalne, które będą animowane podczas wchodzenia i wychodzenia z DOM.

Oto demo tego, co zamierzamy zbudować:

Dodając właściwość xyz="fade out-delay-5" do składnika XyzTransition , modalny zanika.

Zauważ, że dodajemy .xyz-nested do prawie wszystkich elementów potomnych komponentu modalnego. Dzieje się tak, ponieważ chcemy wyzwalać ich animacje, gdy element modalnego komponentu jest otwarty.

Właściwość „ ease-out-back , którą dodaliśmy do kontenera okna dialogowego, doda niewielkie przekroczenie, gdy okno dialogowe zostanie otwarte i gdy zostanie zamknięte.

Dodanie in-delay do elementów podrzędnych komponentu modalnego sprawi, że animacja będzie bardziej naturalna, ponieważ element będzie opóźniony, dopóki inna zawartość modalnego nie zostanie animowana w:

 <section class="xyz-animate"> <div class="alerts__wrap copy-content"> <div class="alert reduced-motion-alert"> <p> AnimXYZ animations are disabled if your browser or OS has reduced-motion setting turned on. <a href="https://web.dev/prefers-reduced-motion/" target="_blank"> Learn more here. </a> </p> </div> </div> <h1>Modal Animation With AnimXYZ and Vue.js</h1> <button class="modal-toggle modal-btn-main" data-modal-text="Open Modal" data-modal-title="Title" data-modal-close-text="Close" aria-haspopup="dialog" ref="openButton" @click="open" autofocus > Open Modal </button> <span class="simple-modal-overlay" data-background-click="enabled" title="Close this window" v-if="isModal" @click="close" > <span class="invisible">Close this window</span> </span> <div role="dialog" class="simple-modal__wrapper" aria-labelledby="modal-title" > <XyzTransition duration="auto" xyz="fade out-delay-5"> <section aria-labelledby="modal1_label" aria-modal="true" class="modal xyz-nested" xyz="fade small stagger ease-out-back" v-if="isModal" tabindex="-1" ref="modal" @keydown.esc="close" > <div class="modal_top flex xyz-nested" xyz="up-100% in-delay-3"> <header class="modal_label xyz-nested" xyz="fade right in-delay-7" > Join our community on Slack </header> <button type="button" aria-label="Close" xyz="fade small in-delay-7" class="xyz-nested" @click="close" title="Close" > <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true"> <path fill="currentColor" d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z" ></path> </svg> </button> </div> <div class="modal_body xyz-nested" xyz="up-100% in-delay-3"> <div class="modal_body--top flex justify_center align_center"> <img src="../assets/slack.png" alt="slack logo" class="slack_logo" /> <img src="../assets/plus.png" alt="plus" class="plus" /> <img src="../assets/discord.png" alt="discord logo" class="discord_logo" /> </div> <p><span class="bold">929</span> users are registered so far.</p> </div> <form class="modal_form" autocomplete> <label for="email" ><span class="sr-only">Enter your email</span></label > <input type="email" placeholder="[email protected]" autocomplete="email" class="modal_input" required /> <button type="submit" class="modal_invite_btn"> Get my invite </button> <p>Already joined?</p> <button type="button" class=" modal_slack_btn flex align_center justify_center xyz-nested " xyz="fade in-right in-delay-7" > <span ><img src="../assets/slack.png" alt="slack logo" role="icon" /></span> Open Slack </button> </form> </section> </XyzTransition> </div> </section>

Następnie w naszym modalnym użylibyśmy dyrektywy v-if="isModal" , aby określić, że chcemy, aby modalny był domyślnie ukryty na stronie. Następnie, po kliknięciu przycisku, otwieramy modalny, wywołując metodę open() , która ustawia właściwość isModal na true . Spowoduje to ujawnienie modalnego na stronie, a także zastosowanie właściwości animacji, które określiliśmy za pomocą wbudowanych narzędzi AnimXYZ.

 <script> export default { data() { return { isModal: false, }; }, methods: { open() { if (!this.isModal) { this.isModal = true; this.$nextTick(() => { const modalRef = this.$refs.modal; console.log(modalRef); modalRef.focus(); }); } }, close() { if (this.isModal) { this.isModal = false; this.$nextTick(() => { const openButtonRef = this.$refs.openButton; openButtonRef.focus(); }); } }, }, }; </script>

Animacje AnimXYZ są wyłączone, gdy włączone jest ustawienie ograniczenia ruchu w przeglądarce lub systemie operacyjnym. Wyświetlmy komunikat pomocy użytkownikom, którzy zdecydowali się na ograniczenie ruchu.

Korzystając z @media screen and (prefers-reduced-motion) wyświetlimy komunikat informujący tych użytkowników, że wyłączyli funkcję animacji w naszym komponencie modalnym. Aby to zrobić, dodaj następujący blok kodu do swoich stylów:

 <style> @media (prefers-reduced-motion: reduce) { .alerts__wrap { display: block; } } </style> 

Wniosek

Przeszliśmy przez podstawy AnimXYZ i tego, jak używać go ze zwykłym HTML i Vue.js. Wdrożyliśmy również kilka projektów demonstracyjnych, które dają nam wgląd w zakres animacji CSS, które możemy stworzyć, po prostu dodając komponowalne klasy narzędziowe dostarczone przez ten zestaw narzędzi, a wszystko to bez pisania ani jednej linii klatki kluczowej CSS. Mamy nadzieję, że ten samouczek dał ci solidne podstawy do dodawania eleganckich animacji CSS do własnych projektów i budowania na nich z biegiem czasu dla dowolnych potrzeb.

Ostateczne demo jest na GitHub. Możesz go sklonować i samemu wypróbować zestaw narzędzi.

To wszystko na teraz! Daj mi znać w sekcji komentarzy poniżej, co myślisz o tym artykule. Jestem aktywny na Twitterze i GitHub. Dziękuję za przeczytanie i bądź na bieżąco.

Zasoby

• Dokumentacja, AnimXYZ
• AnimXYZ, Chris Coyier, sztuczki CSS