AnimXYZ를 사용하여 Vue에서 구성 가능한 CSS 애니메이션

이 기사에서는 AnimXYZ 툴킷을 사용하여 Vue.js 및 일반 HTML에서 고유하고 대화식이며 시각적으로 매력적인 애니메이션을 만드는 방법을 배웁니다. 이 기사가 끝나면 Vue.js 구성 요소의 요소에 몇 가지 CSS 클래스를 추가하여 이러한 요소가 DOM에서 이동하는 방식을 많이 제어할 수 있는 방법을 배웠습니다.

이 튜토리얼은 몇 줄의 코드로 대화형 애니메이션을 만드는 데 관심이 있는 독자에게 도움이 될 것입니다.

참고 : 이 기사는 Vue.js와 CSS에 대한 기본적인 이해가 필요합니다.

AnimXYZ는 무엇입니까?

AnimXYZ는 CSS 변수로 구동되는 구성 가능하고 성능이 뛰어나며 사용자 정의 가능한 CSS 애니메이션 툴킷입니다. CSS 키프레임을 작성하지 않고도 멋지고 독특한 애니메이션을 만들 수 있도록 설계되었습니다. 내부적으로 CSS 변수를 사용하여 사용자 정의 CSS 속성을 생성합니다. AnymXYZ의 좋은 점은 선언적 접근 방식입니다. 요소는 두 가지 방법 중 하나로 애니메이션을 적용할 수 있습니다. 페이지에 들어가거나 나갈 때. 이 툴킷을 사용하여 HTML 요소에 애니메이션을 적용하려는 경우 xyz-out 클래스를 추가하면 항목이 페이지 밖으로 애니메이션되고 xyz-in 은 구성 요소가 페이지에 애니메이션 효과를 줍니다.

이 멋진 툴킷은 일반 HTML 프로젝트와 Vue.js 또는 React 앱에서 사용할 수 있습니다. 그러나 글을 쓰는 시점 에서 React에 대한 지원은 아직 개발 중 입니다.

왜 AnimXYZ를 사용합니까?

구성 가능

AnimXYZ를 사용한 애니메이션은 설명이 포함된 클래스 이름을 마크업에 추가하여 가능합니다. 따라서 복잡한 CSS 키프레임을 작성하지 않고도 복잡한 CSS 애니메이션을 쉽게 작성할 수 있습니다. 페이지에 요소 애니메이션을 적용하는 것은 구성 요소에 xyz-in 클래스를 추가하고 설명 속성을 선언하는 것만큼 쉽습니다.

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

위의 코드는 단락 요소를 페이지로 페이드 아웃하도록 만드는 반면 아래 코드는 요소를 페이지에서 페이드 아웃합니다. 많은 힘을 가진 단 하나의 클래스.

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

사용자 정의 가능

간단한 애니메이션의 경우 즉시 사용 가능한 유틸리티를 사용할 수 있지만 AnimXYZ는 훨씬 더 많은 작업을 수행할 수 있습니다. 모든 AnimXYZ 애니메이션을 구동하는 CSS 변수를 설정하여 AnimXYZ를 사용자 정의하고 제어하여 원하는 애니메이션을 정확하게 생성할 수 있습니다. 이 자습서의 뒷부분에서 몇 가지 사용자 지정 애니메이션을 만들 것입니다.

성능

AnimXYZ를 사용하면 즉시 강력하고 부드러운 애니메이션을 만들 수 있으며 크기는 기본 기능의 경우 2.68KB, 편리한 유틸리티를 포함하는 경우 11.4KB에 불과합니다.

배우기 쉽고 사용하기 쉬움

AnimXYZ는 일반 HTML 및 CSS와 완벽하게 작동하며 콘텐츠 전송 네트워크(CDN) 링크를 사용하여 프로젝트에 통합할 수 있습니다. React에 대한 지원은 아직 개발 중이지만 Vue.js 및 React에서도 사용할 수 있습니다. 또한 이 툴킷을 사용한 학습 곡선은 GSAP 및 Framer Motion과 같은 애니메이션 라이브러리와 비교할 때 가파르지 않으며 공식 문서에서는 패키지의 작동 방식을 간단한 용어로 설명하기 때문에 쉽게 시작할 수 있습니다.

AnimXYZ의 주요 개념

컨텍스트

특정 애니메이션 흐름을 요소의 관련 그룹에 적용하려면 xyz 속성이 컨텍스트를 제공합니다. 세 개의 div 가 페이지에 들어갈 때 같은 방식으로 애니메이션되기를 원한다고 가정해 보겠습니다. 적용하려는 구성 가능한 유틸리티 및 변수와 함께 xyz 속성을 상위 요소에 추가하기만 하면 됩니다.

 <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>

위의 코드는 shape 클래스가 있는 모든 div 에 동일한 애니메이션을 적용합니다. xyz="fade flip-up flip-left" 속성이 상위 요소에 적용되었기 때문에 모든 하위 요소가 페이지로 페이드되고 왼쪽 상단으로 뒤집힙니다.

AnimXYZ를 사용하면 상위 요소와 다르게 하위 요소를 쉽게 애니메이션할 수 있습니다. 이를 달성하려면 자식 요소에 다른 애니메이션 변수와 다른 유틸리티가 있는 xyz 속성을 추가합니다. 그러면 부모 요소에서 상속된 모든 애니메이션 속성이 재설정됩니다.

유용

AnimXYZ에는 사용자 정의 CSS를 작성하지 않고도 매력적이고 강력한 CSS 애니메이션을 만들 수 있는 많은 유틸리티가 포함되어 있습니다.

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

예를 들어, 위의 코드에는 fade up 유틸리티가 있어 페이지에 들어올 때 요소를 위에서 아래로 페이드하게 만듭니다. 들어와서 왼쪽에서 회전합니다. 요소가 페이지를 떠나면 오른쪽으로 이동하여 페이지 밖으로 회전합니다.

즉시 사용 가능한 유틸리티를 사용하면 요소 그룹을 오른쪽으로 뒤집고 페이지를 떠나는 동안 희미하게 만들 수 있습니다. 유틸리티로 얻을 수 있는 가능성은 무궁무진합니다.

엄청난

stagger 유틸리티는 목록의 각 요소에 대한 animation-delay CSS 속성을 제어하여 해당 애니메이션이 차례로 트리거되도록 합니다. 요소에 애니메이션을 적용하고 애니메이션을 수행하기 시작할 때까지 기다려야 하는 시간을 지정합니다. 기본적으로 요소가 순서대로 애니메이션될 수 있도록 애니메이션을 대기열에 넣는 데 사용됩니다.

 <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>

stagger 유틸리티를 추가하면 상위 div 의 각 요소가 왼쪽에서 오른쪽으로 차례로 애니메이션됩니다. stagger-rev 를 사용하여 순서를 따를 수 있습니다.

stagger :

stagger 없이:

HTML 및 CSS와 함께 AnimXYZ 사용하기

AnimeXYZ로 카드를 만들고 멋진 애니메이션을 추가해 봅시다.

먼저 AnimXYZ 툴킷을 프로젝트에 추가해야 합니다. 가장 쉬운 방법은 CDN을 사용하는 것입니다. CDN을 가져와 HTML 문서의 head 에 추가합니다.

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>

마법이 일어나는 곳입니다. 페이지 상단에는 클래스가 xyz-in 인 단락 태그와 값이 fade 인 xyz 속성이 있습니다. 이것은 p 요소가 페이지로 페이드된다는 것을 의미합니다.

다음으로 id 가 glass 인 카드가 있으며 다음 xyz 속성이 있습니다.

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

위의 구성 가능한 유틸리티는 카드를 페이지로 페이드하게 만듭니다. flip-down 값은 카드가 아래쪽에서 페이지로 뒤집히도록 설정하고 flip-right 뒤집기 값은 페이지를 떠날 때 카드를 50% 뒤집습니다. 애니메이션 지속 시간 10 (즉, 1초)은 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 설정합니다.

Vue.js에 AnimXYZ 통합하기

Vue.js 프로젝트 스캐폴드

Vue.js 명령줄 인터페이스(CLI)를 사용하여 아래 명령을 실행하여 애플리케이션을 생성합니다.

 vue create animxyz-vue

VueAnimXYZ 설치

 npm install @animxyz/vue

이렇게 하면 핵심 패키지와 Vue.js 패키지가 모두 설치됩니다. 설치 후에는 VueAnimXYZ 패키지를 프로젝트로 가져와서 Vue.js 애플리케이션에 전역적으로 플러그인을 추가해야 합니다. 이렇게 하려면 main.js 파일을 열고 그에 따라 다음 코드 블록을 추가합니다.

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

XyzTransition 구성 요소

XyzTransition 구성 요소는 Vue.js의 transition 구성 요소 위에 빌드됩니다. 페이지 안팎으로 개별 요소에 애니메이션을 적용하는 데 사용됩니다.

다음은 Vue.js에서 XyzTransition 구성 요소를 사용하는 방법에 대한 데모입니다.

Vue.js의 transition 구성 요소와 함께 제공되는 많은 복잡성은 복잡성을 줄이고 효율성을 높이기 위해 추상화되었습니다. XyzTransition 컴포넌트를 사용할 때 우리가 신경써야 하는 모든 것은 appear , appear-visible , duration 및 mode 소품입니다.

자세한 가이드는 공식 문서를 확인하세요.

XYZTransition 구성 요소를 사용하여 버튼을 클릭할 때 요소에 애니메이션을 적용해 보겠습니다.

 <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>

전환하려는 요소가 XYZTransition 구성 요소에서 어떻게 래핑되는지 확인하십시오. 이는 자식 요소 <div class="square" v-if="isAnimate"></div> 가 XYZTransition 구성 요소에 적용된 유틸리티를 상속하기 때문에 중요합니다. isAnimate 가 true 로 설정되면 자식 요소도 조건부로 렌더링됩니다. 버튼을 클릭하면 square 클래스의 자식 요소가 DOM 안팎으로 토글됩니다.

XyzTransitionGroup

XyzTransitionGroup 구성 요소는 Vue.js의 transition-group 구성 요소 위에 구축됩니다. 페이지 안팎으로 요소 그룹에 애니메이션을 적용하는 데 사용됩니다.

다음은 Vue.js에서 XyzTransitionGroup 컴포넌트를 사용하는 방법을 보여줍니다. 여기서 다시 Vue.js의 transition-group 구성 요소와 함께 제공되는 많은 복잡성이 복잡성을 줄이고 효율성을 높이기 위해 추상화되었음을 알 수 있습니다. XyzTransitionGroup 구성 요소를 사용할 때 신경써야 하는 모든 것은 appear , appear-visible , duration 및 tag 입니다. 다음은 문서에서 가져온 것입니다.

 <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>

AnimXYZ 및 Vue.js로 애니메이션 모달 빌드

DOM에 들어오고 나갈 때 애니메이션되는 모달 구성 요소를 빌드해 보겠습니다.

다음은 빌드할 데모입니다.

xyz="fade out-delay-5" 속성을 XyzTransition 구성 요소에 추가하면 모달이 페이드됩니다.

모달 구성 요소의 거의 모든 자식 요소에 .xyz-nested 를 추가하고 있음을 주목하세요. 이는 모달 구성 요소의 요소가 열려 있을 때 애니메이션을 트리거하기를 원하기 때문입니다.

대화 상자 컨테이너에 추가한 ease-out-back 속성은 대화 상자가 열리고 닫힐 때 약간의 오버슈트를 추가합니다.

모달 구성 요소의 자식 요소에 in-delay 을 추가하면 모달의 다른 콘텐츠가 애니메이션될 때까지 요소가 지연되기 때문에 애니메이션이 더 자연스럽게 느껴집니다.

 <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>

그런 다음 모달에서 v-if="isModal" 지시문을 사용하여 기본적으로 모달을 페이지에서 숨기도록 지정합니다. 그런 다음 버튼을 클릭하면 isModal 속성을 true 로 설정하는 open() 메서드를 호출하여 모달을 엽니다. 그러면 페이지의 모달이 표시되고 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>

AnimXYZ의 애니메이션은 브라우저나 운영 체제에서 모션 감소 설정이 켜져 있을 때 비활성화됩니다. 모션 감소를 선택한 사용자에게 도우미 메시지를 표시해 보겠습니다.

@media screen and (prefers-reduced-motion) 미디어 쿼리를 사용하여 사용자에게 모달 구성 요소의 애니메이션 기능을 껐음을 알리는 메시지를 표시합니다. 이렇게 하려면 스타일에 다음 코드 블록을 추가합니다.

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

결론

AnimXYZ의 기본 사항과 일반 HTML 및 Vue.js와 함께 사용하는 방법을 살펴보았습니다. 또한 이 툴킷에서 제공하는 구성 가능한 유틸리티 클래스를 추가하고 CSS 키프레임을 한 줄도 작성하지 않고 모두 만들 수 있는 CSS 애니메이션 범위를 엿볼 수 있는 데모 프로젝트를 구현했습니다. 이 튜토리얼을 통해 자신의 프로젝트에 세련된 CSS 애니메이션을 추가하고 필요에 따라 시간이 지남에 따라 이를 기반으로 구축할 수 있기를 바랍니다.

최종 데모는 GitHub에 있습니다. 자유롭게 복제하고 툴킷을 직접 사용해 보십시오.

지금은 여기까지입니다! 이 기사에 대해 어떻게 생각하는지 아래 댓글 섹션에 알려주십시오. 저는 Twitter와 GitHub에서 활동하고 있습니다. 읽어주셔서 감사합니다. 계속 지켜봐 주세요.

자원

• 문서, AnimXYZ
• AnimXYZ, Chris Coyier, CSS 트릭