javascript - 创建CSS过渡

我正在使用下面的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转换，但似乎无法正常工作。

最佳答案

您可以使用.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';