본문 바로가기
  • 삽질하는 자의 블로그
3. React Transition Group 으로, 자체 애니메이션 컴포넌트 만들기 React Transition Group 의 두번째 기능으로 CSSTransition 이 존재한다. CSSTransition 은 Transition 과는 달리, state 를 주어주지 않고, classNames 를 지정하면 자동으로 className 이 state 에 따라 달라진다. 혹은, className 을 상태에 따라 직접 지정할 수 있다. 가장 중요한 점은 컴포넌트 자체를 감싸기만 해도, 전체에 대한 애니메이션 효과를 만들 수 있다는 것이다. 무슨말인지 모르겠지! 직접 보면서 이야기해보자! 이 기능을 사용하는 가장 큰 이유인, 컴포넌트 자체를 애니메이션이 있는 상태로 만들어 보자. 0. CSSTransition 의 기본 설명 이거다! [원래대로라면] classNames ={"fade"}라고 할당하.. 2022. 12. 23.
2. React Transition Group 의 기본 사용 https://reactcommunity.org/react-transition-group/ React Transition Group Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elem reactcommunity.org 1. 설치와 기능 npm install react-transition-group --s.. 2022. 12. 22.
1. CSS 전환과 애니메이션의 한계 CSS 전환과 애니메이션 1) CSS 전환 (tansition) : "class 의 변경에 의해" 스타일이 변화할때, 변환되는 시간을 조절해서, 애니메이션 "처럼" 보이게 만드는 방법 tansition : all 300ms ease-out 처럼 사용하는 그것 2) 애니메이션 ( animation ) : 컴포넌트가 동작할때, 애니메이션을 주는 진짜 애니메이션 CSS 전환의 한계 : 컴포넌트가, css 에 의해 변경될 때 만 가능하다. 조건에 만족하면, DOM에서 생성되거나 사라지는, Modal 과 컴포넌트 들에서는 사용 자체가 불가능하다. CSS 애니메이션의 사용 1) animation 옵션을 사용하여, [애니메이션 이름], [시간], [타이밍] 을 정한다. 2) @keyframes 을 사용하여, [애니메.. 2022. 12. 22.

티스토리툴바