본문 바로가기
  • 삽질하는 자의 블로그
3. infinite 옵션과, from, to 를 이용해 빙빙 돌아가는 할일 만들기 컴포넌트 import styles from "./Todos.module.css"; const Todos = () => { return ( 할일 ); }; export default Todos; css .maindiv { height: 3rem; width: 5rem; } .rotation { font-size: 2rem; text-align: center; animation: rotation infinite 500ms linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 하핫 2022. 12. 23.
2. 버튼 누를때마다 animation 동작하게 만들기, with React, useEffect animation 은 상태가 평가될때, 한번 실행된다. 버튼을 누를때마다, 실행되게 만들자. 재평가를 시키려면, useState 가 필요할 것이고, 트리거를 만드려면, useEffect 가 필요할것이다. function LayoutHeader() { const [showModal, setShowModal] = useState(false); const cartCtx = useContext(CartContext); ... let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`;// setBump 해야, bump 스타일 활성화 useEffect(() => { setBtnBump(() => true);// 버튼의 bump 스타일이, 생기는 트리거 setTi.. 2022. 12. 12.
1. CSS animation 사용하기 with React https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프 developer.mozilla.org 이걸 보고 자꾸 실패했다. 왜? className 으로 지정하지 않았기 때문이었다!! React 에서, css animation 을 지정하려거든, className 으로 css animation 을 딱! 집어야한다. 애매하게, p 이렇게 하.. 2022. 12. 12.

티스토리툴바