使隐藏的元素显示自己，然后使用过渡移动

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会更好。

我也建议动漫J。

尝试操纵可见性属性，而不是显示：

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

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