Question

我不想像jquery那样制作show（）和hide（）方法，但是使用纯javascript，因为我想修改元素的显示和隐藏方式。但是在我尝试之后，我已经改变了代码所在的位置，更改了代码等，但仍然无法工作。只有几次它是工作，但它是不一致的（当我尝试通过Firefox运行它，它工作一次但从未再次）。显示（块和无）以及确切的宽度和高度是有效的，但不是2s过渡。如何解决这个问题？

<!doctype html>
<html>

<head>
<style>
    div {
        width: 0px;
        height: 0px;
        background-color: yellow;
        border: 1px solid black;
        display: none;
    }
</style>
</head>

<body>

<div>
</div>

<button>
    click !
</button>

<script>
    var x = document.getElementsByTagName("button");
    var y = document.getElementsByTagName("div");

    x[0].onclick = fungsi;

    function fungsi() {
        if (y[0].style.display != "block") {
            y[0].style.display = "block";
            y[0].style.transition = "width 2s";
            y[0].style.transition = "height 2s";
            y[0].style.width = "100px";
            y[0].style.height = "100px";
        } else {
            y[0].style.display = "";
            y[0].style.transition = "width 2s";
            y[0].style.transition = "height 2s";
            y[0].style.width = "";
            y[0].style.height = "";
        }
    };
</script>
</body>

</html>

Answer 1

这可能与供应商前缀

有关

除此之外还有以下内容：

y[0].style.transition

您还需要：

y[0].style.mozTransition
y[0].style.webkitTransition

尝试一下，希望能够奏效。

Answer 2

你正在做的不是使用＆＃34;纯粹的javascript＆＃34;动画显示和隐藏，它实际上是动画显示并隐藏 CSS3 。您只是通过javascript设置CSS属性！

话虽如此，每个浏览器都不支持CSS3转换。例如，甚至IE9也不支持它。其他一些浏览器只能使用此属性的前缀版本。

尝试设置-moz-transition，-webkit-transition和-o-transition。

有关详细信息，请参阅：Transition browser support

但是，如果您希望您的动画适用于所有主要平台，我建议您使用jQuery并尝试将设置调整为您想要的行为..

Answer 3

我已经弄乱了您的代码，发现问题的原因是从display: none;切换到display: block;并返回。如果您想使用它，我已经为此做了一个简单的解决方案。

这是修改后的CSS代码。

div {
    width: 0px;
    height: 0px;
    background-color: yellow;
    border: none;
}

这是修改后的JS代码。

var x = document.getElementsByTagName("button");
var y = document.getElementsByTagName("div");
x[0].onclick = fungsi;
var expanded = false;

function fungsi() {
    y[0].style.transition = "all 2s";
    if (!expanded) {
        y[0].style.border = "1px solid black";
        y[0].style.width = "100px";
        y[0].style.height = "100px";
        expanded = true;
    } else {
        var applyBorder = function () {
            y[0].style.border = "none";
        };
        y[0].style.width = "0";
        y[0].style.height = "0";
        expanded = false;
        setTimeout(applyBorder, 2000);
    }
};

here是此代码的JSFiddle示例。

Answer 4

运行时

y[0].style.transition = "width 2s";
y[0].style.transition = "height 2s";

第一行将被第二行覆盖。因此，转换一次仅针对宽度或高度，当其中一个为0时，转换将不可见。

您应该像这样设置转换：

y[0].style.transition = 'width 2s,height 2s';

或者只为支持转换的all属性设置它：

y[0].style.transition = 'all 2s';

顺便说一句，由于转换属性没有改变，你应该将它们设置在更改部分之外。

另一个问题是，<div>必须在动画开始前可见，否则一旦变为可见就会有所需的宽度和高度，并且不再需要转换。 visibility是另一种选择，因为visibility: hidden的元素仍然取代。

以下是代码的工作副本：

<!doctype html>
<html>

<head>
<style>
    div {
        width: 0px;
        height: 0px;
        background-color: yellow;
        border: 1px solid black;
        /* Use visibility instead of display */
        visibility: hidden;
    }
</style>
</head>
<body>

<div>
</div>

<button>
    click !
</button>

<script>
    var x = document.getElementsByTagName("button");
    var y = document.getElementsByTagName("div");

    x[0].onclick = fungsi;
    // set transition
    y[0].style.transition = "width 2s,height 2s";

    function fungsi() {
        if (y[0].style.visibility != "visible") {
            y[0].style.visibility = "visible";
            y[0].style.width = "100px";
            y[0].style.height = "100px";
        } else {
            y[0].style.visibility = "";
            y[0].style.width = "";
            y[0].style.height = "";
        }
    };
</script>
</body>

</html>

还有更多，如果你想在动画结束后隐藏元素，setTimeout就可以了。

Javascript转换持续时间不起作用

4 个答案: