[JAVASCRIPT] tạo chuyển động hai chiều với animation

JavaScript

Mô tả: Click 1 lần vật thể di chuyển , click lần nữa vật thể quay trở lại vị trí cũ .Mình sẽ code và giải thích chi tiết ngay phía sau.

Xem Demo:

Click vào đây để xem kết quả

Code Html

Cấu trúc HTML:

  • 1 nút button có tên là Click me
  • 1 khối div có nội dung “Chuyển động” đặt trong thẻ <h4>
  • Đặt style cho class “khoi”

Javascript

  • Khởi tạo biến “nut” để truy xuất phần tử button
  • Khởi tạo biến “khoi” để truy xuất phần tử div
  • Khởi tạo biến “trangthai” gán giá trị ban đầu là “click1” để đặt điều kiện cho câu lệnh if
  • Tạo sự kiện onclick cho button bằng function anonymous
  • Trong function anonymous mình thực hiện lệnh if  else có ý nghĩa :

– Khi click lần 1 vào button: vì giá trị khởi tạo của biến “trangthai” = “click1” nên các lệnh trong khối lệnh if được thực thi:

+ Khối div sẽ remove class “chuyendong2” tuy class  “chuyendong2” hiện tại chưa có nhưng khi bạn click lần 2 nó sẽ add vào và nếu ta click lần thứ 3 thì cần phải remove thằng này.

+ Khối div sẽ add class “chuyendong1”

+ Gán giá trị cho biến “trangthai” là “click2”

– Khi click lần 2 vào button lúc này giá trị của biến “trangthai” = “click2” nên các lệnh trong khối lệnh else if thi :

+ Khối div sẽ remove class “chuyendong1”

+ Khối div sẽ add class “chuyendong2”

+ Gán giá trị cho biến “trangthai” là “click1”

Ok bây giờ mình sẽ tạo chuyển động với animation ở file css

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *