使隐藏元素显示自身，然后使用过渡移动答案

【问题标题】：Making hidden element display itself and then move using transition使隐藏元素显示自身，然后使用过渡移动
【发布时间】：2019-07-28 20:47:05
【问题描述】：

如何修复此代码，使两个元素首先不再隐藏，然后使用过渡平滑地向右移动。它在元素没有开始隐藏时起作用，但当它隐藏时，它只是跳转到结束点。如何在不移除隐藏元素并将元素宽度减小为零的情况下完成这项工作？谢谢。

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>

【问题讨论】：

标签： javascript html css css-transitions contains

【解决方案1】：

先用opacity: 0代替display: none，再用translateX代替right会更好。

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

【讨论】：

【解决方案2】：

尝试操作visibility 属性而不是显示：

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

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

【讨论】：