Javascript and css animation

Question

How can I make an animation? When I press a button like Monday, the object with the correct color will move down, and if it is not the button pressed like "Tuesday" the previous object will move up and the correct object will move down. Thank you in advance

Here is the example of code..

function myFunction(myColor) {
  const square_day = document.getElementById("square")
  switch (myColor) {
    case "Monday":
      square_day.style.borderColor = "#ff7f98";
      square_day.style.backgroundColor = "#ff7f9880";
      square_day.style.animation = "square-to-circle 1s .83s"
      break
    case "Tuesday":
      square_day.style.borderColor = "#d7d77b";
      square_day.style.backgroundColor = "#d7d77b80";
      square_day.style.animation = "square-to-circle 1s .83s"
      break
  }

#square {
  height: 500px;
  width: 500px;
  position: relative;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  margin-left: auto;
  margin-right: auto;
  border-color: black;
  top: -700px;
}

@keyframes square-to-circle {
  0% {
    top: -700px
  }
  100% {
    top: 0px;
  }
}

Justin · Accepted Answer

I wasn't sure if you planned on only using the one square or adding one for each day. It appeared you would have one for each day since you had it in a container. Here's an answer using one for each day.

function myFunction(myColor) {
  const squares = document.getElementsByClassName("square");

  for (let i = 0; i < squares.length; i++) {
    if (myColor == squares[i].id) {
      squares[i].style.transform = "translate(-50%, 20px)";
    } else {
      squares[i].style.transform = "translate(-50%, -700px)";
    }
    switch (myColor) {
      case "Monday":
        squares[0].style.borderColor = "#ff7f98";
        squares[0].style.backgroundColor = "#ff7f9880";
        break;
      case "Tuesday":
        squares[1].style.borderColor = "#d7d77b";
        squares[1].style.backgroundColor = "#d7d77b80";
        break;
      case "Wednesday":
        squares[2].style.borderColor = "purple";
        squares[2].style.backgroundColor = "violet";
        break;
      case "Thursday":
        squares[3].style.borderColor = "forestgreen";
        squares[3].style.backgroundColor = "green";
        break;
      case "Friday":
        squares[4].style.borderColor = "darkorange";
        squares[4].style.backgroundColor = "orange";
        break;
      case "Saturday":
        squares[5].style.borderColor = "blue";
        squares[5].style.backgroundColor = "lightblue";
        break;
      case "Sunday":
        squares[6].style.borderColor = "red";
        squares[6].style.backgroundColor = "pink";
        break;
    }
  }
}

.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 1s;
}

EDIT: Adding another option for just using one square element

const square = document.getElementById("square");

function myFunction(myColor) {
  const squareBounds = square.getBoundingClientRect();
  if (squareBounds.top < 0) {
    changeColor(myColor);
  } else {
    square.style.transform = "translate(-50%, -700px)";
    setTimeout(changeColor, 500, myColor);
  }
}

function changeColor(myColor) {
  switch (myColor) {
    case "Monday":
      square.style.borderColor = "#ff7f98";
      square.style.backgroundColor = "#ff7f9880";
      break;
    case "Tuesday":
      square.style.borderColor = "#d7d77b";
      square.style.backgroundColor = "#d7d77b80";
      break;
    case "Wednesday":
      square.style.borderColor = "purple";
      square.style.backgroundColor = "violet";
      break;
    case "Thursday":
      square.style.borderColor = "forestgreen";
      square.style.backgroundColor = "green";
      break;
    case "Friday":
      square.style.borderColor = "darkorange";
      square.style.backgroundColor = "orange";
      break;
    case "Saturday":
      square.style.borderColor = "blue";
      square.style.backgroundColor = "lightblue";
      break;
    case "Sunday":
      square.style.borderColor = "red";
      square.style.backgroundColor = "pink";
      break;
  }
  setTimeout(dropDown, 500, square);
}

function dropDown(square) {
  square.style.transform = "translate(-50%, 20px)";
}

.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 1s;
}

EDIT: Adding alpha to background

let m = { Monday: 0, alpha: 0 };
let t = { Tuesday: 0, alpha: 0 };
let w = { Wednesday: 0, alpha: 0 };
let th = { Thursday: 0, alpha: 0 };
let f = { Friday: 0, alpha: 0 };
let s = { Saturday: 0, alpha: 0 };
let su = { Sunday: 0, alpha: 0 };
let arr = [m, t, w, th, f, s, su];

function myFunction(myColor) {
  const squares = document.getElementsByClassName("square");
  for (let i = 0; i < squares.length; i++) {
    if (myColor == squares[i].id) {
      squares[i].style.transform = "translate(-50%, 20px)";
    } else {
      squares[i].style.transform = "translate(-50%, -700px)";
    }
    if (arr[i].hasOwnProperty(myColor)) {
      arr[i].alpha = 0;
    } else {
      arr[i].alpha = 1;
    }

    switch (myColor) {
      case "Monday":
        squares[0].style.borderColor = "#ff7f98";
        squares[0].style.backgroundColor = "rgba(0, 150, 15," + m.alpha + ")";
      case "Tuesday":
        squares[1].style.borderColor = "#d7d77b";
        squares[1].style.backgroundColor = "rgba(0, 255, 255," + t.alpha + ")";
      case "Wednesday":
        squares[2].style.borderColor = "purple";
        squares[2].style.backgroundColor = "rgba(190, 0, 237," + w.alpha + ")";
      case "Thursday":
        squares[3].style.borderColor = "forestgreen";
        squares[3].style.backgroundColor = "rgba(0, 150, 15," + th.alpha + ")";
      case "Friday":
        squares[4].style.borderColor = "darkorange";
        squares[4].style.backgroundColor = "rgba(209, 160, 0," + f.alpha + ")";
      case "Saturday":
        squares[5].style.borderColor = "blue";
        squares[5].style.backgroundColor = "rgba(38, 237, 255," + s.alpha + ")";
      case "Sunday":
        squares[6].style.borderColor = "red";
        squares[6].style.backgroundColor = "rgba(255, 77, 249," + su.alpha + ")";
    }
  }
}

.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 2s;
}

Javascript and css animation

Answers (1)

Related Questions