Заставить скрытый элемент отображать себя, а затем перемещаться с помощью перехода

Question

Как мне исправить этот код, чтобы два элемента сначала перестали быть скрытыми, а затем плавно переместились вправо, используя переход.Это работает, когда элемент не начинает скрываться, но когда это так, он просто переходит на конечную точку.Как мне сделать эту работу, не убирая скрытых и уменьшая ширину элементов до нуля?Спасибо.

var one = document.getElementById('one');
        var two = document.getElementById('two');
        
        function myFunct() {
            two.style.display = 'flex';
            two.style.right = '70%';
        }

#one {
  position: absolute;
  width: 300px;
  height: 100px;
  border: 1px solid red;    	 
}
#two {
  position: absolute;
  display: none;
  min-width: 5px;
  height: 100%;
  transition: 1.5s;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -ms-transition: 1.5s;
  background-color: green;
  right: 0px;
 }

<div id = 'one' onclick = 'myFunct()'>
  <div id = 'two'></div>
</div>  

Answer 1

Попробуйте манипулировать свойством visibility вместо отображения:

function myFunct() {
    two.style.visibility = 'visible';
    two.style.right = '70%';
}

#two {
    visibility: hidden;
    display: flex;
    ...
}

Answer 2

Сначала используйте opacity: 0 вместо display: none, и лучше будет использовать translateX вместо right.

Я также рекомендую AnimeJS , поскольку он делает анимацию и переходынамного проще, если вы используете их несколько.