반응형 애니메이션3 Vue.js UI 애니메이션 (Transition) - CSS 애니메이션 ex)transition 1.일반 CSS사용하는 방식 class명을 줘서 시작과 끝을 정하는 방식이다. 변수를 클래스에 담을 때 :class와같이 사용하여 설정한다. 가능한 방법이지만 Transition을 사용하면 더욱 편하다. ...... .start{ opacity: 0; transition:all 1s; } .end{ opacity: 1; } ...... 2.Vue.js제공하는 Transition사용하기 transiton을 사용하고싶은 컴포넌트를 으로 감싸주고 name으로 이름을 지어준다. 그리고 style부분에서 컴포넌트 시작시, 종료시 2가지 경우가 있다. 1)시작시 이름-enter-from, 이름-enter-active, 이름-enter-to 로 3가지 경우로 나눠주고 2.. 2023. 4. 1. CSS 애니메이션, 위아래 움직이는 효과주기 과거 이와같이 만들어서 효과를 사용했었는데 다시 만들 필요성이 있었다. 그리고 좀더 부드럽게 만들고 싶었다. 아래와같이 다시 만들게 됬는데 추후 스타일링은 다시 해야할거 같다. 사용한 CSS애니메이션 스타일은 이와같이 사용했다. next.js의 style jsx안에서 사용했고, 어디서 사용해도 크게 다를건없다. 다만 좀더 디테일하게 설정한 부분이 두 가지 있다. 단어 태그하나하나당 div로 감싸서 사용하기도 했지만 각 단어에 위아래 움직이는 효과를 주지않고 한 묶음으로 아래와 같이 묶어서 사용해줬다. #꼬들 #탱글 #쫄깃 #파 #달걀 #소고기 그렇게 묶어서 사용해줘야 다시 단어 하나하나 마다 좌우로 배치해줘서 자연스러운 position설정이 가능했다. .side{ position:relative; lef.. 2022. 3. 23. React Css애니메이션(keyframe,건배효과,짠효과) https://flykimjiwon.tistory.com/74 좌우 흔들리는 건배효과 (cheers!) 이 그림을 사용해서 좌우로 흔들리는 건배효과를 만들고싶었다. 채팅창에서 버튼을클릭하면 모든 사용자에게 보여주고 싶었기 때문! 우선 작업을 하는건 둘째치고 기본적인 베이스에서 저그림 flykimjiwon.tistory.com 위와같이 버튼을누르면 모든창에서 짠효과가 발동하게, 건배효과가 발동하게 만들었다. 기본은 html,css 베이스로만들었고 그걸 리액트에 적용시켰다. Cheers.css .ch{ position: relative; animation-name: example; animation-duration: 1s; animation-iteration-count: infinite; /* 이거무제한키워.. 2022. 2. 14. 이전 1 다음 반응형
