Question

我需要帮助在此show / hide js代码中添加过渡，该代码对我有用，但我一直在努力使它们平滑地显示/隐藏

任何过渡都可以做到，只要它指出我朝着两个div过渡都完美的方向

function switchVisible() {
            if (document.getElementById('Div1')) {

                if (document.getElementById('Div1').style.display == 'none') {
                    document.getElementById('Div1').style.display = 'block';
                    document.getElementById('Div2').style.display = 'none';
                }
                else {
                    document.getElementById('Div1').style.display = 'none';
                    document.getElementById('Div2').style.display = 'block';
                }
            }
}

#Div2 {
  display: none;
}
a{cursor: pointer; font-weight: 600;}

<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>

<a id="Button1" value="Click" onclick="switchVisible();">hide</a>

Answer 1

另一种方法是结合使用visibility: hidden和visible属性的transition（和optical）。

您可以检查以下codepen

Answer 2

设置display: none时，还可以为应该隐藏的div添加opacity: 0。

然后，您为应该显示的div设置opacity: 1。

最后，将transition: 0.2s ease-in-out都添加到两者中，当隐藏和显示该过渡时，您应该会看到一个平滑的过渡。 0.2s表示秒，因此请更改为您喜欢的值。

编辑：

因此，根据Gezzasas的评论，它不适用于style属性。因此，我删除了该代码并更改了您的代码，以使其显示出平滑的过渡。

You can check the code by clicking here (codepen).

向Java显示/隐藏Div添加过渡吗？

2 个答案: