анимировать элемент на весь экран с css

Question

Как мне анимировать, чтобы при щелчке по размеру отображаться на экране. Я не хочу давать позицию в исходное состояние. Div должен быть в состоянии динамически использоваться на экране.

.box {
  width: 80px;
  height: 80px;
  background: red;
  cursor: pointer;
  transition: 1s ease-in-out;
}

.fullscreen {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top:0;
  left:0;
  background: red;
  transition: 1s ease-in-out;
}

Кодовая демонстрация моего кода

Answer 1

Чтобы анимировать left и top, вам понадобится начальное значение, которого у вас нет. Вы можете добавить их по щелчку, а затем установить новые значения, изменив класс.

Обратите внимание, что я добавил новые значения в стиль, поэтому нам также необходимо добавить !important в правило класса, чтобы оно переопределило встроенный стиль.

function expand(){
  // get the element
  var box = document.getElementsByClassName("box")[0];
  
  // set top and left properties
  box.style.setProperty("left", box.offsetLeft + "px");
  box.style.setProperty("top", box.offsetTop + "px");
  box.style.setProperty("position", "absolute");
  
  // now change the class for the animation will work
  box.className = "fullscreen";
}

.box {
  width: 80px;
  height: 80px;
  background: red;
  cursor: pointer;
  transition: 1s ease-in-out;
  margin: 0 auto;
  margin-top: 100px;
}

.fullscreen {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  background: red;
  transition: 1s ease-in-out;
}

<div class="box" onClick="expand()"></div>