Question

我有这次潜水切换隐藏/显示！ ...可以，但是我想知道如何向隐藏/显示添加过渡动画？

这是我的JS：

function myFunction() {
var x = document.getElementById("clock1");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none" ;

}

Answer 1

您无法为display属性设置动画。但是您可以在CSS中轻松设置visibility或opacity属性的动画：

// main.html
<div id="clock1" class="hidden">...</div>

// main.css
#clock1 {
    visibility: visible;
    opacity: visible;
    transition: visibility 0s, opacity 0.5s linear;
}
#clock1.hidden {
    visibility: hidden;
    opacity: 0;
}

// main.js
function myFunction() {
  var x = document.getElementById("clock1")
  if (x.classList.contains('hidden')) {
    x.classList.remove('hidden')
  } else {
    x.classList.add('hidden')
  }
}

Answer 2

将@XmlAttribute(name = "customerNumber") //will map to @customerNumber in JSON @XmlAttribute(name = "elid") //will map to @elid in JSON设置为display将立即隐藏该元素，这意味着随着时间的流逝，动画/可见性转换没有机会。

也许您可以考虑使用none来实现这一目标？

添加以下CSS：

opacity

更新您的JS：

#clock1 {
  transition:opacity 1s;
}

工作jsFiddle here

如何向此DIV TOGGLE隐藏/显示添加过渡动画？

2 个答案:

添加以下CSS：

更新您的JS：