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，因为如果使用大量动画和过渡，它会使动画和过渡变得容易得多。

Answer 2

尝试操纵visibility属性，而不要显示：

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

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

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

2 个答案: