创建 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 淡出或 "fly" 亮起？我以为我可以使用 webkit 转换，但似乎无法使其工作。

Answer 1

显示属性不是动画 css 属性。

您需要使用以下列表中的属性来为 css 中的任何内容设置动画：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 2

您可以使用 .style.setProperty() 方法从 javascript 添加 webkit transitions 或任何其他 CSS，如下所示：

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';

创建 CSS 转换

Creating a CSS Transition

javascript

css

transition

button