타사 애니메이션 라이브러리를 프로젝트에 통합합니다

CSS 기반 애니메이션 및 전환을 만드는 것은 어려울 수 있습니다. 그들은 복잡하고 시간이 많이 걸릴 수 있습니다. 완벽한 전환을 조정할 시간이 거의없는 프로젝트를 진행해야합니까? 사용하기 위해 준비된 애니메이션이있는 타사 CSS 애니메이션 라이브러리를 고려하십시오. 그러나 당신은 생각하고있을 것입니다 : 그들은 무엇입니까? 그들은 무엇을 제공합니까? 어떻게 사용합니까?

글쎄, 알아 보겠습니다.

(일종의) 간단한 역사 : 호버

일단 호버 상태의 개념이 오늘날에 제공되는 것의 사소한 예가되었다는 시간이있었습니다. 실제로, 요소 위에 지나가는 커서에 대한 반응이 있다는 생각은 더욱 존재하지 않았다. 이 기능을 제공하는 다양한 방법이 제안되고 구현되었습니다. 이 작은 기능은 어떤 방식 으로든 CSS가 페이지의 요소에 대한 애니메이션을 사용할 수 있다는 아이디어의 문을 열었습니다. 시간이 지남에 따라 이러한 기능으로 인해 복잡성이 증가함에 따라 CSS 애니메이션 라이브러리가 발생했습니다.

Macromedia의 Dreamweaver는 1997 년 12 월에 소개되어 Hover의 이미지 스왑 인 간단한 기능이 무엇인지 제공했습니다. 이 기능은 편집기가 HTML에 포함시킬 JavaScript 함수로 구현되었습니다. 이 기능은 MM_SwapImage ()로 지명되었으며 약간의 웹 디자인 민속이되었습니다. DreamWeaver 외부에서도 사용하기 쉬운 대본이었으며 인기가 높아 오늘날에도 여전히 사용 중이 었습니다. 이 기사에 대한 초기 연구에서 Adobe 's Dreamweaver (2005 년 Adobe Aucked Macromedia) 도움말에 관한 2018 년 부터이 기능과 관련된 질문을 발견했습니다.

JavaScript 함수는 마우스 오버 및 마우스 아웃 이벤트를 기반으로 SRC 속성을 변경하여 이미지를 다른 이미지로 교체합니다. 구현되면 다음과 같이 보였습니다.

 <a href="#" onmouseout="mm_swapimgrestore ()" onmouseover="mm_swapimage ( 'imageName', '', 'newImage.jpg', 1)">
  <img  src="originalImage.jpg" name="imageName"    style="max-width:90%"  style="max-width:90%" border="0" alt="타사 애니메이션 라이브러리를 프로젝트에 통합합니다" >
</a>

오늘날의 표준에 따르면, JavaScript로 이것을 달성하는 것은 상당히 쉬울 것입니다. 그리고 우리 중 많은 사람들이 우리의 수면에서 실제로 이것을 할 수 있습니다. 그러나 JavaScript는 당시에는이 새로운 스크립팅 언어였으며 (1995 년에 제작) 브라우저와 브라우저에 이르기까지 다르게보고 행동했습니다. 크로스 브라우저 JavaScript를 만드는 것이 항상 쉬운 일은 아니며 웹 페이지를 만드는 모든 사람이 JavaScript를 쓴 것은 아닙니다. Dreamweaver는 편집자의 메뉴를 통해이 기능을 제공했으며 웹 디자이너는 JavaScript를 작성할 필요조차 없었습니다. 다양한 옵션 목록에서 선택할 수있는 일련의 "동작"을 기반으로했습니다. 이러한 옵션은 타겟팅 된 브라우저 세트에 의해 필터링 될 수 있습니다. 3.0 브라우저, 4.0 브라우저, IE 3.0, IE 4.0, Netscape 3.0, Netscape 4.0. 아, 좋은 옛날.

DreamWeaver가 처음 출시 된 지 약 1 년 후, W3C의 CSS2 사양은 다음과 같이 언급했습니다. 1998 년 1 월에 작업 초안의 호버. 앵커 링크 측면에서 구체적으로 언급되었지만 언어는 다른 요소에 적용될 수 있음을 시사합니다. 대부분의 목적을 위해이 의사 선택기는 배경 이미지가 동일한 초안에 있었기 때문에 MM_SwapImage ()에 대한 쉬운 대안의 시작일 것 같습니다. 브라우저 지원은 충분한 브라우저가 CSS2를 올바르게 지원하기 위해 몇 년이 걸렸기 때문에 많은 웹 디자이너에게 실행 가능한 옵션이되기까지 몇 년이 걸렸지 만 문제였습니다. 마지막으로 CSS2.1에 대한 W3C 권장 사항이 있었으며, 이는 2011 년 6 월에 출판 된“현대”CSS의 기초로 간주 될 수 있습니다.

이 모든 중간에 JQuery는 2006 년에 왔습니다. 고맙게도 JQuery는 다른 브라우저 중에서 JavaScript를 단순화하는 데 먼 길을갔습니다. 우리의 이야기에 관심있는 한 가지, jQuery의 첫 번째 버전은 animate () 방법을 제공했습니다. 이 방법을 사용하면 언제든지 모든 요소의 CSS 속성을 애니메이션 할 수 있습니다. 호버만이 아닙니다. 인기가 높아짐에 따라이 방법은 브라우저에 구워진보다 강력한 CSS 솔루션의 필요성을 노출 시켰습니다. 브라우저 제한으로 인해 항상 수행되지 않은 JavaScript 라이브러리가 필요하지 않은 솔루션입니다.

: 호버 의사 클래스는 원활한 전환을 지원하지 않고 한 주에서 다른 상태로 단단한 교환 만 제공했습니다. 또한 요소 위에 호버링하는 것만 큼 기본적인 것 외부의 요소의 변화를 애니메이션 할 수 없었습니다. JQuery의 Animate () 방법은 이러한 기능을 제공했습니다. 그것은 길을 열었고 돌아 가지 않았습니다. 웹 개발의 역동적 인 세계에서 일이 진행됨에 따라 CSS2.1의 권장 사항이 발표되기 전에 이것을 해결하기위한 작업 초안이 잘 진행되었습니다. CSS 전환 모듈 레벨 3에 대한 첫 번째 작업 초안은 2009 년 3 월 W3C에서 처음 게시했습니다. CSS 애니메이션 모듈 레벨 3의 첫 번째 작업 초안은 거의 동시에 게시되었습니다. 이 CSS 모듈은 모두 2018 년 10 월 기준으로 작업 초안 상태에 있지만 물론 우리는 이미 그것들을 많이 사용하고 있습니다.

따라서 단순한 호버 상태를 위해 제 3자가 제공 한 JavaScript 함수로 처음 시작된 것은 CSS의 전환과 애니메이션으로 이어졌으며 정교하고 복잡한 애니메이션을 허용했습니다. 많은 개발자들이 새로운 프로젝트를 신속하게 움직일 필요가 있다고 생각하지는 않습니다. 우리는 완전한 원을 갔다. 오늘날 많은 타사 CSS 애니메이션 라이브러리 가이 복잡성을 상쇄하기 위해 만들어졌습니다.

세 가지 유형의 타사 애니메이션 라이브러리

우리는 웹 페이지와 앱에서 강력하고 흥미롭고 복잡한 애니메이션이 가능한이 새로운 세계에 있습니다. 이러한 새로운 작업에 접근하는 방법에 대한 몇 가지 다른 아이디어가 최전선에 도달했습니다. 하나의 접근법이 다른 어떤 접근법보다 낫다는 것은 아닙니다. 실제로, 각각에는 약간의 중복이 있습니다. 차이점은 우리가 코드를 구현하고 쓰는 방법에 대한 것입니다. 일부는 본격적인 JavaScript 전용 라이브러리이고 다른 일부는 CSS 전용 컬렉션입니다.

JavaScript 라이브러리

JavaScript를 통해서만 작동하는 라이브러리는 종종 일반적인 CSS 애니메이션이 제공하는 것 이상의 기능을 제공합니다. 일반적으로 라이브러리가 실제로 엔진의 일부로 CSS 기능을 사용할 수 있으므로 중첩이 있지만 API에 유리하게 추상화됩니다. 이러한 라이브러리의 예로는 Greensock 및 Anime.js가 있습니다. 그들이 제공하는 데모를 보면서 그들이 제공하는 것의 범위를 볼 수 있습니다 (Greensock은 Codepen에서 멋진 컬렉션이 있습니다). 그들은 주로 매우 복잡한 애니메이션을위한 것이지만 더 기본적인 애니메이션에도 유용 할 수 있습니다.

JavaScript 및 CSS 라이브러리

주로 CSS 클래스를 포함하지만 프로젝트에서 수업을 쉽게 사용할 수있는 JavaScript를 제공하는 타사 라이브러리가 있습니다. 하나의 라이브러리 인 Micron.js는 요소에 사용할 수있는 JavaScript API 및 데이터 속성을 모두 제공합니다. 이 유형의 라이브러리를 사용하면 선택할 수있는 사전 구축 된 애니메이션을 쉽게 사용할 수 있습니다. 다른 라이브러리 Motion UI는 JavaScript 프레임 워크와 함께 사용되도록 의도됩니다. 그러나 그것은 또한 JavaScript API, 사전 구축 클래스 및 데이터 속성의 혼합 된 개념에도 불구하고 작동합니다. 이러한 유형의 라이브러리는 사전 구축 된 애니메이션과이를 쉽게 연결하는 방법을 제공합니다.

CSS 라이브러리

세 번째 종류의 라이브러리는 CSS 전용입니다. 일반적으로 이것은 HTML의 링크 태그를 통해로드하는 CSS 파일입니다. 그런 다음 특정 CSS 클래스를 적용하여 제거하여 제공된 애니메이션을 사용합니다. 이 유형의 라이브러리의 두 가지 예는 애니메이션과 애니 미스타입니다. 즉,이 두 개의 특정 라이브러리 사이에는 큰 차이가 있습니다. Animate.css는 총 CSS 패키지이며 Animista는 제공된 코드로 원하는 애니메이션을 선택할 수있는 매끄러운 인터페이스를 제공합니다. 이 라이브러리는 종종 구현하기 쉽지만이를 사용하려면 코드를 작성해야합니다. 이것들은이 기사에서 초점을 맞출 라이브러리 유형입니다.

CSS 애니메이션의 세 가지 유형

예, 패턴이 있습니다. 3의 규칙은 결국 어디에나 있습니다.

대부분의 경우 타사 라이브러리를 사용할 때 고려해야 할 세 가지 유형의 애니메이션이 있습니다. 각 유형은 다른 목적에 적합하며이를 사용하는 다른 방법이 있습니다.

호버 애니메이션

이 애니메이션은 일종의 호버 상태에 관여하기위한 것입니다. 그들은 종종 버튼과 함께 사용되지만 또 다른 가능성은 커서가 켜져있는 섹션을 강조하는 데 사용하는 것입니다. 또한 포커스 상태에도 사용될 수 있습니다.

주의 애니메이션

이 애니메이션은 일반적으로 페이지를 보는 사람의 시각적 중심 외부에있는 요소에 사용됩니다. 주의가 필요한 디스플레이 섹션에 애니메이션이 적용됩니다. 이러한 애니메이션은 최종주의가 필요하지만 본질적으로 끔찍하지 않은 것들에 대해서는 미묘 할 수 있습니다. 그들은 또한 즉각적인주의가 필요할 때 매우 산만해질 수 있습니다.

전환 애니메이션

이 애니메이션은 종종 뷰에서 다른 요소를 대체하기위한 것이지만 한 요소에도 사용될 수 있습니다. 여기에는 일반적으로보기를 "떠나는"애니메이션이 포함됩니다. 예를 들어 한 섹션의 데이터 섹션이 다른 데이터 세트로 전환되므로 단일 페이지 앱에서 일반적으로 필요합니다. 이것은 일반적으로 단일 페이지 앱에서 일반적으로 필요합니다.

따라서 이러한 각 유형의 애니메이션의 예와 사용 방법을 살펴 보겠습니다.

그것을 가져 가자!

일부 라이브러리는 이미 호버 효과로 설정 될 수 있지만 일부 라이브러리는 호버 상태를 주요 목적으로 가지고 있습니다. 이러한 라이브러리 중 하나는 Hover.CSS이며 클래스 이름을 통해 적용되는 다양한 호버 효과를 제공하는 드롭 인 솔루션입니다. 그러나 때때로 우리는 다음을 직접 지원하지 않는 라이브러리에서 애니메이션을 사용하고 싶습니다. 호버 의사 클래스는 글로벌 스타일과 충돌 할 수 있기 때문입니다.

이 예에서는 Animate.css가 제공하는 TADA 애니메이션을 사용합니다. 그것은 관심을 찾는 사람으로 더 의도되었지만이 예를 들어 충분히 충분할 것입니다. 도서관의 CSS를 살펴 보려면 아무도 없다는 것을 알 수 있습니다. 호버 의사 클래스를 찾을 수 있습니다. 그래서 우리는 그것을 스스로 그런 식으로 만들어야합니다.

Tada 클래스 자체는 단순히 다음과 같습니다.

 .tada {
  애니메이션-이름 : 타다;
}

이 호버 상태에 반응하기위한 낮은 리프트 접근법은 우리 자신의 로컬 클래스 사본을 만드는 것이지만 약간 확장하는 것입니다. 일반적으로 Animate.css는 드롭 인 솔루션이므로 원래 CSS 파일을 편집 할 수있는 옵션이 필요하지 않습니다. 원하는 경우 파일의 로컬 사본을 가질 수 있습니다. 따라서, 우리는 우리가 다른 코드 만 생성하고 라이브러리가 나머지를 처리하도록합니다.

 .tada-hover : 호버 {
  애니메이션-이름 : 타다;
}

실제로 다른 곳에서 사용하려는 경우 원래 클래스 이름을 무시해서는 안됩니다. 대신, 우리는 선택기에 호버 의사 클래스를 배치 할 수있는 변형을 만듭니다. 이제 우리는 도서관의 필수 애니메이션 클래스와 함께 사용자 정의 타다 호버 클래스를 요소에 사용하며 해당 애니메이션을 호버에서 재생합니다.

이런 식으로 사용자 정의 클래스를 만들고 싶지 않지만 대신 JavaScript 솔루션을 선호한다면이를 처리하는 비교적 쉬운 방법이 있습니다. 이상하게도, 그것은 앞에서 논의한 DreamWeaver의 mm_imageswap () 메소드와 비슷한 방법입니다.

 // id #js_example으로 요소를 선택하겠습니다
var js_example = document.querySelector ( '#js_example');

// id #js_example이있는 요소가 호버링 될 때 ...
js_example.addeventListener ( '마우스 오버', function () {
  // ... 요소에 두 가지 클래스를 추가합시다 : 애니메이션과 타다 ...
  this.classlist.add ( '애니메이션', '타다');
});
// ... 그런 다음 마우스가 요소에 없을 때 해당 클래스를 제거하십시오.
js_example.addeventListener ( '마우스 아웃', function () {
  this.classlist.remove ( '애니메이션', '타다');
});

실제로 컨텍스트에 따라이를 처리하는 여러 가지 방법이 있습니다. 여기에서는 마우스 오버 및 마우스 아웃 이벤트를 기다릴 수있는 이벤트 리스너를 만듭니다. 그런 다음이 청취자들은 필요에 따라 도서관의 애니메이션 및 타다 수업을 적용하고 제거합니다. 보시다시피, 우리의 요구에 맞게 타사 도서관을 약간 확장하는 것은 비교적 쉬운 방식으로 달성 될 수 있습니다.

주의를 기울여도 될까요?

타사 라이브러리가 도울 수있는 또 다른 유형의 애니메이션은 관심을 찾는 사람입니다. 이 애니메이션은 페이지의 요소 나 섹션에주의를 기울이고 싶을 때 유용합니다. 이에 대한 몇 가지 예는 알림 또는 채워리지 않은 필수 양식 입력 일 수 있습니다. 이 애니메이션은 미묘하거나 직접적 일 수 있습니다. 무언가가 궁극적으로주의를 기울여야하지만 즉시 해결할 필요는없는 경우 미묘합니다. 지금 무언가가 해결해야 할 때 직접.

일부 라이브러리에는 전체 패키지의 일부와 같은 애니메이션이 있으며 일부 라이브러리는이 목적을 위해 특별히 구축됩니다. CSS와 Animista는 모두 애니메이션을 찾는 관심을 가지고 있지만 해당 라이브러리의 주요 목적은 아닙니다. 이 목적을 위해 구축 된 라이브러리의 예는 CSSHAKE입니다. 어떤 라이브러리를 사용할 도서관은 프로젝트의 요구와 프로젝트 구현에 투자하는 시간에 따라 다릅니다. 예를 들어, CSSHAKE는 문제가 거의 없을 것입니다. 필요에 따라 수업을 적용합니다. ANIMET.CSS와 같은 라이브러리를 이미 사용하고 있다면 두 번째 라이브러리를 소개하지 않을 것입니다 (성능, 의존성 등).

따라서 Animate.css와 같은 라이브러리를 사용할 수 있지만 조금 더 설정해야합니다. 도서관의 GitHub 페이지에는이 작업을 수행하는 방법의 예가 있습니다. 프로젝트의 요구에 따라 이러한 애니메이션을주의를 끌기 위해 구현하는 것은 다소 간단합니다.

미묘한 유형의 애니메이션의 경우 세트를 여러 번 반복하고 중지하는 애니메이션을 가질 수 있습니다. 여기에는 일반적으로 라이브러리 수업을 추가하고 애니메이션 반복 속성을 CSS에 적용하고 애니메이션 엔드 이벤트가 라이브러리 수업을 지우기 위해 기다리는 것입니다.

다음은 호버 상태에서 이전에 본 것과 동일한 패턴을 따르는 간단한 예입니다.

 var pulse = document.querySelector ( '#pulse');

함수 playPulse () {
  pulse.classlist.add ( '애니메이션', '펄스');
}

pulse.addeventListener ( 'animationEnd', function () {
  pulse.classlist.remove ( '애니메이션', '펄스');
});

playpulse ();

PlayPulse 함수가 호출 될 때 라이브러리 클래스가 적용됩니다. 애니메이션 이벤트의 이벤트 리스너가 라이브러리의 수업을 제거 할 수 있습니다. 일반적으로 이것은 한 번만 재생되지만 중지하기 전에 여러 번 반복하고 싶을 수도 있습니다. animate.css는 이에 대한 클래스를 제공하지 않지만 요소가이를 처리 할 수 ​​있도록 CSS 속성을 적용하는 것은 쉽습니다.

 #맥박 {
  애니메이션-고유 한 카운트 : 3; / * 세 번만 중지 */
}

이렇게하면 애니메이션이 중지되기 전에 세 번 재생됩니다. 애니메이션을 더 빨리 중지 해야하는 경우 애니메이션 기능 외부에서 라이브러리 클래스를 수동으로 제거 할 수 있습니다. 도서관의 문서는 실제로 애니메이션 후에 제거하는 클래스를 적용하기위한 재사용 가능한 기능의 예를 제공합니다. 위 코드와 매우 유사합니다. 반복 수를 요소에 적용하기 위해 확장하는 것은 쉽습니다.

보다 직접적인 접근 방식을 위해, 어떤 종류의 사용자 상호 작용이 이루어질 때까지 멈추지 않는 무한 애니메이션을 가정 해 봅시다. 요소를 클릭하는 것이 애니메이션을 시작하고 다시 클릭하면 중지되는 척하자. 그러나 애니메이션을 시작하고 멈추고 싶다는 점을 명심하십시오.

 var bounce = document.querySelector ( '#bounce');

bounce.addeventListener ( 'click', function () {
  if (! bounce.classlist.contains ( 'animated')) {
    bounce.classlist.add ( '애니메이션', '바운스', '무한');
  } 또 다른 {
    bounce.classlist.remove ( '애니메이션', '바운스', '무한');
  }
});

충분히 간단합니다. 라이브러리의 "애니메이션"클래스가 적용된 경우 요소 테스트를 클릭합니다. 그렇지 않은 경우 라이브러리 클래스를 적용하여 애니메이션을 시작합니다. 수업이 있으면 애니메이션을 중지하기 위해 클래스를 제거합니다. 클래스리스트 끝에 무한 클래스가 있습니다. 고맙게도 Animate.css는 이것을 우리에게 제공합니다. 선택 라이브러리가 그러한 수업을 제공하지 않으면 CSS에서 필요한 것입니다.

 #bounce {
  애니메이션-고유 한 카운트 : 무한;
}

다음은이 코드가 어떻게 작동하는지 보여주는 데모입니다.

방해로 물건을 움직입니다

이 기사를 연구 할 때 전환 (CSS 전환과 혼동되지 않음)이 타사 라이브러리에서 가장 일반적인 유형의 애니메이션임을 알았습니다. 이들은 요소가 페이지를 입력하거나 떠날 수 있도록 구축 된 간단한 애니메이션입니다. 최신 단일 페이지 응용 프로그램에서 볼 수있는 매우 일반적인 패턴은 한 요소가 페이지를 떠나는 반면 다른 요소가 페이지를 입력하여 대체하는 것입니다. 첫 번째 요소가 사라지고 두 번째로 페이딩되는 것을 생각해보십시오. 이전 데이터를 새 데이터로 대체하거나 순서대로 다음 패널로 이동하거나 라우터를 사용하여 한 페이지에서 다른 페이지로 이동할 수 있습니다. Sarah Drasner와 Georgy Marchuk는 이러한 유형의 전환에 대한 훌륭한 예를 가지고 있습니다.

대부분의 경우 애니메이션 라이브러리는 전환 애니메이션 중에 요소를 제거하고 추가하는 수단을 제공하지 않습니다. 추가 JavaScript를 제공하는 라이브러리는 실제로이 기능을 가질 수 있지만 대부분은 그렇지 않으므로이 기능을 처리하는 방법에 대해 논의합니다.

단일 요소를 삽입합니다

이 예에서는 ANIMET.CSS를 라이브러리로 다시 사용하겠습니다. 이 경우 Fadeindown 애니메이션을 사용하겠습니다.

이제 요소를 DOM에 삽입하는 것을 다루는 방법이 여러 가지가 있으며 여기에 여기를 덮고 싶지 않습니다. 나는 단순히 삽입을 단순히보기보다 더 멋지고 자연스럽게 만들기 위해 애니메이션을 활용하는 방법을 보여줄 것입니다. Animate.css (및 아마도 다른 많은 라이브러리)의 경우 애니메이션에 요소를 삽입하는 것이 매우 쉽습니다.

 insertElement = document.createElement ( 'div');
insertElement.innerText = '이 div가 삽입됩니다';
insertElement.classlist.add ( '애니메이션', '페이드 인 다우드');

insertElement.addeventListener ( 'animationEnd', function () {
  this.classlist.remove ( '애니메이션', 'Fadeindown');
});

document.body.append (insertElement);

그러나 요소를 만들기로 결정한 것은 그다지 중요하지 않습니다. 요소를 삽입하기 전에 필요한 클래스가 이미 적용되도록해야합니다. 그러면 잘 애니메이션을 제자리에 넣을 것입니다. 또한 수업을 제거하는 애니메이션 이벤트의 이벤트 리스너도 포함했습니다. 평소와 같이,이 작업을 수행하는 방법에는 여러 가지가 있으며이를 처리하는 가장 직접적인 방법 일 것입니다. 수업을 제거하는 이유는 원하는 경우 프로세스를보다 쉽게 ​​뒤집을 수 있도록하기 때문입니다. 우리는 떠나는 애니메이션과 경쟁하는 애니메이션에 들어가는 것을 원하지 않을 것입니다.

단일 요소를 제거합니다

단일 요소를 제거하는 것은 요소를 삽입하는 것과 비슷합니다. 요소가 이미 존재하므로 원하는 애니메이션 클래스 만 적용합니다. 그런 다음 AnimationEnd 이벤트에서 우리는 DOM에서 요소를 제거합니다. 이 예에서는 FadeIndown 애니메이션과 잘 작동하기 때문에 Animate.css의 FadeOutdown 애니메이션을 사용합니다.

 revelement = document.querySelector ( '#removeElement');

removelement.addeventListener ( 'animationEnd', function () {
  this.remove ();
});

removeElement.classList.add ( '애니메이션', 'FadeOutdown');

보시다시피, 우리는 요소를 대상으로하고 클래스를 추가하며 애니메이션 끝에서 요소를 제거합니다.

이 모든 문제는 요소를 삽입하고 제거하면 페이지의 다른 요소가 조정하기 위해 점프하게된다는 것입니다. 요소의 일정한 공간을 유지하기 위해 CSS와 페이지 레이아웃을 사용하면 어떤 식 으로든이를 설명해야합니다.

내 길을 벗어나, 난 다.!

이제 우리는 두 가지 요소를 교환 할 것입니다. 이것을 처리하는 몇 가지 방법이 있지만, 본질적으로 이전 두 예제를 결합한 예제를 제공하겠습니다.

나는 그것이 어떻게 작동하는지 설명하기 위해 부분적으로 JavaScript를 살펴볼 것입니다. 먼저, 우리는 버튼에 대한 참조와 두 요소의 컨테이너를 캐시합니다. 그런 다음 컨테이너 내부에 교환되는 두 개의 상자를 만듭니다.

 let button = document.querySelector ( 'button');
컨테이너 = document.querySelector ( '. 컨테이너');
box1 = document.createElement ( 'div');
box2 = document.createElement ( 'div');

각 애니메이션 이벤트에 대한 애니메이션 클래스를 제거하는 일반적인 기능이 있습니다.

 removeClasses = function () {
  box1.classlist.remove ( '애니메이션', 'fadeoutright', 'fadeinleft');
  box2.classlist.remove ( '애니메이션', 'fadeoutright', 'fadeinleft');
}

다음 함수는 대부분의 스와핑 기능입니다. 먼저, 현재 상자가 표시되는 것을 결정합니다. 이를 바탕으로, 우리는 떠나는 요소를 추론 할 수 있습니다. 떠나는 요소는 SwitchElements 함수라고 불리는 이벤트 리스너를 먼저 제거하여 애니메이션 루프에서 자신을 찾지 못합니다. 그런 다음 애니메이션이 완료된 후 컨테이너에서 잎 요소를 제거합니다. 다음으로, 우리는 애니메이션 클래스를 입력 요소에 추가하고 컨테이너에 추가하여 애니메이션을 설치할 수 있습니다.

 switchElements = function () {
  currentElement = document.querySelector ( '. container .box');
  LefeElement = currentElement.classList.contains ( 'box1')를하자? Box1 : Box2;
  Enterlement = LeaveElement === Box1을하자? Box2 : Box1;
  
  LeaveElement.removeEventListener ( 'AnimationEnd', SwitchElements);
  LeaveElement.remove ();
  Enterlement.classlist.add ( '애니메이션', 'FadeInleft');
  Container.Append (Enterlement);
}

우리는 두 상자에 대한 일반적인 설정을해야합니다. 또한 첫 번째 상자를 컨테이너에 추가합니다.

 box1.classlist.add ( 'box', 'box1');
box1.addeventListener ( 'animationend', RemoveClasses);
box2.classlist.add ( 'box', 'box2');
box2.addeventListener ( 'animationend', RemoveClasses);

컨테이너. AppendChild (Box1);

마지막으로, 우리는 토글링을 수행하는 버튼에 대한 클릭 이벤트 리스너가 있습니다. 이러한 이벤트 시퀀스가 ​​시작된 방법은 기술적으로 귀하에게 달려 있습니다. 이 예에서는 간단한 버튼 클릭을 결정했습니다. 나는 현재 어떤 상자가 표시되고 있는지, 즉 떠날 것이며, 애니메이션을 만들기 위해 적절한 클래스를 적용합니다. 그런 다음 실제 스왑을 처리하는 위에 표시된 SwitchElements 함수를 호출하는 AnimationEnd 이벤트에 이벤트 리스너를 적용합니다.

 button.adeventListener ( 'click', function () {
  currentElement = document.querySelector ( '. container .box');
  
  if (currentElement.classList.contains ( 'box1')) {
    box1.classlist.add ( '애니메이션', 'fadeoutright');
    box1.addeventListener ( 'animationend', switchElements);
  } 또 다른 {
    box2.classlist.add ( '애니메이션', 'fadeoutright');
    box2.addeventListener ( 'animationend', switchElements);
  }
}

이 예제의 명백한 문제는이 한 가지 상황에 대해 매우 하드 코딩된다는 것입니다. 그러나 다른 상황에 대해 쉽게 확장되고 조정될 수 있습니다. 따라서이 예는 그러한 작업을 처리하는 한 가지 방법을 이해하는 데 유용합니다. 고맙게도 MotionUi와 같은 일부 애니메이션 라이브러리는 요소 전환에 도움이되는 JavaScript를 제공합니다. 고려해야 할 또 다른 점은 vuejs와 같은 일부 JavaScript 프레임 워크가 요소 전환에 도움이되는 기능이 있다는 것입니다.

또한보다 유연한 시스템을 제공하는 또 다른 예제를 만들었습니다. 데이터 속성으로 떠나고 입력하도록 참조하는 참조를 저장하는 컨테이너로 구성됩니다. 컨테이너에는 명령을 켜는 장소를 전환 할 두 가지 요소가 있습니다. 이 예제가 구축되는 방식은 JavaScript를 통해 데이터 속성에서 애니메이션이 쉽게 변경 될 수 있다는 것입니다. 또한 데모에는 두 개의 컨테이너가 있습니다. 하나는 animate.css를 사용하고 다른 하나는 애니메이션에 Animista를 사용합니다. 큰 예이므로 여기서 코드를 조사하지 않을 것입니다. 그러나 그것은 크게 언급되어 있으므로 관심이 있는지 살펴보십시오.

잠시 시간을내어 ...

모두가 실제로이 모든 애니메이션을보고 싶어합니까? 어떤 사람들은 우리의 애니메이션을 최고로, 불필요하게 고려할 수 있지만, 어떤 사람들에게는 실제로 문제를 일으킬 수 있습니다. 얼마 전, WebKit은 가능한 전정 스펙트럼 장애 문제를 지원하기 위해 Prefer-RESDUCED-MOOT MEDIC MEDIC 쿼리를 도입했습니다. 에릭 베일리 (Eric Bailey)는 또한 미디어 쿼리에 대한 좋은 소개와 모범 사례에 대한 고려 사항이있는 후속 조치를 게시했습니다. 확실히 이것을 읽으십시오.

그렇다면, 당신의 애니메이션 라이브러리가 선호하는 감소 모션을 지원합니까? 문서가 그렇게 말하지 않으면 그렇지 않다고 가정해야 할 수도 있습니다. 그러나 미디어 쿼리에 어떤 것이 있는지 확인하기 위해 라이브러리 코드를 확인하는 것이 다소 쉽습니다. 예를 들어, animate.css는 _base.scss 부분 파일에 있습니다.

 @Media (print), (프리터스-감소 모션) {
  .Animated {
    애니메이션 : 비 세트! 중요;
    전환 : 없음! 중요;
  }
}

이 코드는 또한 라이브러리가 지원하지 않는 경우 직접 수행하는 방법에 대한 훌륭한 예를 제공합니다. 도서관에 ANIMET.CSS와 같이 사용하는 공통 클래스가있는 경우 CSS는 해당 클래스를 타겟팅 할 수 있습니다. 해당 클래스를 지원하지 않으면 실제 애니메이션 클래스를 타겟팅하거나 해당 목적을 위해 자신의 커스텀 클래스를 만들어야합니다.

 .Scale-up-center {
  애니메이션 : 스케일 업 센터 0.4S 입방-베 지어 (0.390, 0.575, 0.565, 1.000);
}

@keyframes scale-up-center {
  0% {변환 : 스케일 (0.5); }
  100% {변환 : 스케일 (1); }
}

@Media (print), (프리터스-감소 모션) {
  .Scale-up-center {
    애니메이션 : 비 세트! 중요;
    전환 : 없음! 중요;
  }
}

보시다시피, 나는 방금 Animate.css가 제공하는 예제를 사용하고 Animista의 애니메이션 클래스를 대상으로했습니다. 라이브러리에서 사용하기로 선택한 모든 애니메이션 클래스에 대해이를 반복해야합니다. 에릭의 후속 작품에서는 모든 애니메이션을 진보적 인 향상으로 취급 할 것을 제안하며 이는 코드를 줄이고보다 접근하기 쉬운 사용자 경험을 만들 수있는 한 가지 방법이 될 수 있습니다.

프레임 워크가 당신을 위해 무거운 리프팅을하도록하십시오

여러면에서 React 및 Vue와 같은 다양한 프레임 워크는 바닐라 JavaScript보다 타사 CSS 애니메이션을 쉽게 사용할 수 있습니다. 주로 수업 스왑이나 애니메이션 이벤트를 수동으로 연결할 필요가 없기 때문입니다. 프레임 워크가 이미 제공 한 기능을 활용할 수 있습니다. 프레임 워크 사용의 장점은 프로젝트의 요구에 따라 이러한 애니메이션을 처리하는 여러 가지 방법을 제공한다는 것입니다. 아래 예제는 옵션의 작은 예일뿐입니다.

호버 효과

호버 효과의 경우, 더 나은 방법으로 CSS (위의 제안대로)로 설정하는 것이 좋습니다. VUE와 같은 프레임 워크에 JavaScript 솔루션이 실제로 필요하다면 다음과 같은 것입니다.

 <button event>
  타다
버튼></button>

 방법 : {
  오버 : 함수 (e, type) {
    e.target.classlist.add ( '애니메이션', 유형);
  },
  떠나기 : 함수 (e, type) {
    e.target.classlist.remove ( '애니메이션', 유형);
  }
}

위의 바닐라 자바 ​​스크립트 솔루션과 크게 다르지 않습니다. 또한 이전과 마찬가지로 이것을 처리하는 방법에는 여러 가지가 있습니다.

관심을 찾는 사람들

관심을 찾는 사람들을 설정하는 것이 실제로 훨씬 쉽습니다. 이 경우 VUE를 예로 사용하여 필요한 클래스를 다시 적용하고 있습니다.

 <div :> 펄스 </div>

<div :> 바운스 </div>

펄스 예에서, 부울 ispulse가 참을 때마다 두 클래스가 적용됩니다. 바운스의 예에서 부울 isbounce가 사실 일 때마다 애니메이션 및 바운스 클래스가 적용됩니다. 무한 클래스는 상관없이 적용되므로 isbounce 부울이 거짓으로 돌아갈 때까지 끝없는 바운스를 가질 수 있습니다.

전환

고맙게도 Vue의 전환 구성 요소는 사용자 정의 전환 클래스와 함께 타사 애니메이션 클래스를 쉽게 사용할 수있는 방법을 제공합니다. React와 같은 다른 라이브러리는 유사한 기능이나 추가 기능을 제공 할 수 있습니다. VUE의 애니메이션 클래스를 사용하기 위해 전환 구성 요소에서이를 구현합니다.

 
  <div v-if="Toggle" key="if"> if Example </div>
  <div v-else key="else"> else example </div>
전환>

Animate.css를 사용하여 필요한 클래스 만 적용합니다. Enter-Active의 경우 Fadeindown과 함께 필요한 애니메이션 클래스를 적용합니다. Leave-Active의 경우 필요한 애니메이션 클래스를 FadeOutdown과 함께 적용합니다. 전환 시퀀스 동안이 클래스는 적절한 시간에 삽입됩니다. Vue는 수업의 삽입 및 제거를 처리합니다.

JavaScript 프레임 워크에서 타사 애니메이션 라이브러리를 사용하는보다 복잡한 예는이 프로젝트를 탐구하십시오.

파티에 가입하십시오!

이것은 탐색 할 3 자 CSS 애니메이션 라이브러리가 많기 때문에 프로젝트를 기다리는 가능성의 작은 맛입니다. 일부는 철저하거나 편심, 구체적, 불쾌감이 있거나 간단합니다. Greensock 또는 Anime.js와 같은 복잡한 JavaScript 애니메이션을위한 라이브러리가 있습니다. 요소의 문자를 대상으로하는 라이브러리도 있습니다.

이 모든 것이 자신의 CSS 애니메이션을 만들기 위해이 도서관들과 함께 연주하도록 영감을주기를 바랍니다.

위 내용은 타사 애니메이션 라이브러리를 프로젝트에 통합합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!