Bài tập javascript 2 – tạo chuyển động hai chiều với animation

0
527

bài tập javascript 2 này, chúng ta sẽ học cách tạo chuyển động hai chiều bằng animation. Trong bài tập javascript đầu tiên thì mình đã giới thiệu cách tạo chuyển động bằng transition và animation. Với transition, chúng ta có thể tạo chuyển động 2 chiều một cách dễ dàng. Nhưng animation thì ta cần phải code thêm vài tí :v, ok mình sẽ bắt đầu luôn.

Bài tập javascript 2 - tạo chuyển động hai chiều với animation 1

Kiến thức cần có:

  1. Biến
  2. Câu lệnh if else
  3. Mảng
  4. Hàm
  5. Event
  6. HTML DOM

Bài tập javascript 2: Tạo chuyển động hai chiều với animation

Mô tả bài tập: 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.

Demo:
Click vào bài tập js 2 để xem kết quả.

Code: html

Mình đã tạo ra 1 file html gồm :

  • 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”

Dưới đây là kết quả của file trên trình duyệt google chrome.

bài tập javascript 2

Code: javascript

File js :

  • 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

Code CSS:

Css thì cần gì giải thích nữa đúng k :v.

Tóm lại cái bài này là  thêm và bỏ class bằng câu lệnh if else thôi

Ok vậy là xong rồi đó ,các bạn nên làm thử vài lần bài tập javascript 2 của mình cho quen tay hihi. Cái này dễ mà, mọi thắc mắc cứ comment ở dưới nhé.  Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

 

avatar
  Subscribe  
Notify of