CSSTransitionsAnimations - 05 - Exercise

csstransitionsanimations-05-exercise.markdown

CSSTransitionsAnimations - 05 - Exercise

A Pen by Abdoul Aziz BA on CodePen.

License.

index.html

<h1>Exercise 5</h1>
Define a transition on the .box for the "left" property.
Add JavaScript code to the clicked function to toggle the position of the box between left=0 and left=300, i.e., make the box move left to right and right to left when clicked.
(Can you make it move in a square path? Left->Right->Bottom->Right->Top)
<div class="box">Lorem</div>

script.js

var el = document.querySelector(".box");
var position = { top: 0, left: 0 };

el.addEventListener("click", clickedBox, false);

function clickedBox(evt) {
	if (position.top === 0 && position.left === 0) {
		el.style.left = "300px";
		position.left = 300;
	} else if (position.top === 0 && position.left === 300) {
		el.style.top = "300px";
		position.top = 300;
	} else if (position.top === 300 && position.left === 300) {
		el.style.left = "0px";
		position.left = 0;
	} else if (position.top === 300 && position.left === 0) {
		el.style.top = "0px";
		position.top = 0;
	}
}

style.css

.box {
	width: 50px;
	height: 50px;
	background-color: red;
	position: absolute;
	left: 0px;
	top: 0px;
	transition: 1s ease-in-out;
}