Javascript转换持续时间不起作用

时间:2015-10-04 01:38:32

标签: javascript

我不想像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> 

4 个答案:

答案 0 :(得分:0)

这可能与供应商前缀

有关

除此之外还有以下内容:

y[0].style.transition

您还需要:

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

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

答案 1 :(得分:0)

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

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

尝试设置-moz-transition-webkit-transition-o-transition

有关详细信息,请参阅:Transition browser support

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

答案 2 :(得分:0)

我已经弄乱了您的代码,发现问题的原因是从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示例。

答案 3 :(得分:0)

运行时

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就可以了。