Animation trong ReactJs

Hôm nay mình sẽ chia sẽ về cách mình sử dụng animation trong ReactJs. Nếu chúng ta quen làm với jquey hay những framework cũ như AngularJs, knockout, … thì ReactJs sẽ làm hơi khác một chút (vì lý do ReactJs sử dụng virtual dom) .

Cách dễ nhất là sử dụng react-transition-group. Mình sẽ không nói gì về cách này vì document cũng rất đầy đủ và dễ xài rồi.

Sau đây mình chia sẻ về cách sử dụng animation của css, ứng dụng vào Reactjs. Khi điều kiện thay đổi làm react render lại view, element sẽ show/ hide ngay lập tức nên để làm animation thì thêm một div bọc bên ngoài của nội dung.

Ở đây mình sẽ làm một ví dụ đơn giản cho slideUp & slideDown.

Ta sẽ dùng transition để tạo hiệu ứng cho animation này. Một lưu ý nhỏ là hiệu ứng transition sẽ không hoạt động với height: auto mà phải là một giá trị cụ thể. Do đó ta sẽ phải set giá trị height của div bọc ngoài bằng đúng với height của nội dung.

Stylesheet đơn giản như sau:

.content-box {
  transition: height 200ms ease-out;
  overflow-y: auto;
}

Đây là component:

const Body = () => {
  const [isExpanded, setIsExpanded] = React.useState(true)

  const inner = React.useRef(null)

  return (
    <div>
      <h3 className="title pad-all flex-between-center" onClick={() => setIsExpanded(!isExpanded)}>
        <span className="">Toggle slide</span>
        {!isExpanded && <span>Open</span>}
        {isExpanded && <span>Close</span>}
      </h3>
      <div className={'content-box '} style={{height: isExpanded && inner.current ? inner.current.clientHeight + 'px' : 0}}>
        <div className="inner pad-all" ref={inner}>
          <img src="https://i.cbc.ca/1.3473565.1489087511!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/programming-code.jpg" alt="" />
        </div>
      </div>
    </div>
  )
}

Ta dùng React.useRef để lấy chiều cao content của nội dung cần làm hiệu ứng, khi slideDown thì ta sẽ set giá trị này cho wrapper, slideUp set giá trị bằng 0.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s