перемещение div снаружи внутрь div и обратно в чистом css без использования ключевого кадра

Question

content1.className = 'start';
window.getComputedStyle(document.getElementById('content1')).opacity;
content1.style.marginLeft = "0px";
content1.className = 'transition1';

.main {
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  overflow: hidden;
  position: relative;
  background-color: grey;
  cursor: pointer;
}

#content1 {
  background-color: red;
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  margin-left: -300px;
}

.start {
  opacity: 0
}

.transition1 {
  opacity: 1;
  visibility: hidden;
  /*margin-left: -300px !important;*/
  -webkit-transition: margin-left 1.5s ease 1.5s, margin-left 1.5s ease 1.5s, visibility 1.5s ease 1.5s
}

<div id="main" class="main">

  <div id="content1" class="content1 hidden">

  </div>
</div>

Я хочу, чтобы красный div начинался снаружи и go медленно переходил в серый div, а через несколько секунд он go выходил снова медленно Я пытался использовать переход, но, похоже, теперь работает.

Я предполагаю, что время неверно?

ОБНОВЛЕНИЕ

У меня есть вышеперечисленное. Чего мне не хватает, так это времени, чтобы показать красный div, затем go снова влево , Я установил видимость, но я думаю, что есть способ просто использовать поля?

Answer 1

Если вы хотите сделать это без ключевых кадров, тогда у меня есть две идеи.

Первая идея - добавить свойство transition css к фактическому элементу # content1. Потому что, удаляя класс .transition1, вы убираете детали перехода.

Если это не сработает, то вам может понадобиться разбить это на 4 разных "состояния".

То есть:

1. Состояние запуска: Красный div начинается незаметно
2. Начальное состояние перехода: .transition1 добавлен класс
3. Конечное состояние: Класс добавлен, чтобы гарантировать, что красный div имеет то же поле, что и .transition1, даже после того, как класс .transition1 получен прочь.
4. Переходное состояние из одного состояния в другое: По сути, делать то, что вы делали в .transition1 классе.

РЕДАКТИРОВАТЬ:

Может быть, игнорировать «4 шага», потому что я, вероятно, переосмыслил то, что вы спрашивали.

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

var main2 = document.getElementById('main2');
var content2 = document.getElementById('content2');

main2.addEventListener('click', function() {
  content2.classList.toggle('active');
});


var main4 = document.getElementById('main4');
var content4 = document.getElementById('content4');

main4.addEventListener('click', function() {
  content4.classList.add('animate');
  setTimeout(function() {
    content4.classList.remove('animate');
  }, 1500)
});

.main {
  width: 300px;
  height: 250px;
  position: relative;
  background-color: grey;
  cursor: pointer;
  overflow: hidden;
}

#content1 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transform: translate(-100%, 0);
  -webkit-transition: transform 1.5s ease;
}

.main:hover #content1 {
  transform: translate(0, 0);
}


/* Toggle Option */

#content2 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transform: translate(-100%, 0);
  -webkit-transition: transform 1.5s ease;
}

#content2.active {
  transform: translate(0, 0);
}


/* SetTimeout Option */

#content4 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transform: translate(-100%, 0);
  -webkit-transition: transform 1.5s ease;
}

#content4.animate {
  transform: translate(0, 0);
}

<h2>Hover Option</h2>
<p>Animation happens on hover and disappears after hover</p>
<div class="main">
  <div id="content1">
  </div>
</div>

<h2>Toggle Option</h2>
<p>Animation happens on click and disappears on second click</p>
<div id="main2" class="main">
  <div id="content2">
  </div>
</div>


<h2>SetTimeout Option</h2>
<p>Animation happens on click and disappears after 1 second</p>
<div id="main4" class="main">
  <div id="content4">
  </div>
</div>