javascript - 使隐藏元素显示自身然后使用过渡移动

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

首先使用opacity: 0 代替display: none 并且使用translateX 代替right 会更好.

我也推荐AnimeJS因为如果你使用一堆动画和过渡，它会使动画和过渡变得容易得多。