javascript - 创建 CSS 过渡

Question

我正在使用下面的 javascript 在单击按钮时显示隐藏的 div:

<script>
function myFunction() {
var x = document.getElementById("mydiv");
if (x.style.display === "none") {
    x.style.display = "none";
} else {
    x.style.display = "block";
}
}
</script>

单击按钮时如何使 div 淡入淡出或“飞入”？我以为我可以使用 webkit 转换，但似乎无法使其工作。

Answer 1

您可以使用 .style.setProperty()添加方法 webkit transitions或任何其他 CSS来自 javascript ，像这样:

var myDiv = document.getElementById('mydiv');

// example fade effect compatible with most browsers
myDiv.style.setProperty("transition", "opacity .2s ease-in-out");
myDiv.style.setProperty("-moz-transition", "opacity .2s ease-in-out");
myDiv.style.setProperty("-webkit-transition", "opacity .2s ease-in-out");

更多关于 .style.setProperty() : https://developer.mozilla.org/setProperty .

编辑:@RokoC.Buljan 指出了一个可能更好的解决方案，只需使用 .style['-vendor-prop'] = 'val'像这样的语法:

myDiv.style['-moz-transition'] = 'opacity .25s ease-in-out';