Javascript 过渡不'；不适用于元素_Javascript_Css_Css Transitions

Javascript 过渡不'；不适用于元素

javascript css

Javascript 过渡不'；不适用于元素,javascript,css,css-transitions,Javascript,Css,Css Transitions,我想在页面中央有一个div（我现在使用300px），当几秒钟过去时，我想让第二个div可见，并使它们都位于中间，相差50px，这就是我现在所做的，我的第一个问题是为什么第二个div的不透明度变化不适用 <!DOCTYPE html> <html> <head> <title>Whatever</title> <meta charset="utf-8" /> <style type="text/c

我想在页面中央有一个div（我现在使用300px），当几秒钟过去时，我想让第二个div可见，并使它们都位于中间，相差50px，这就是我现在所做的，我的第一个问题是为什么第二个div的不透明度变化不适用

<!DOCTYPE html>
<html>
<head>
    <title>Whatever</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #main {
            position: absolute;
            top: 200px;
            left: 300px;
        }

        div.c {
            width: 200px;
            height: 200px;
            float:left;
            position:relative;
            left:200px;
            -webkit-transition:left 2s;
        }

        #left {
            background-color: palevioletred;
        }

        #right {
            -webkit-transition:opacity 2s;
            background-color: ThreeDDarkShadow;
            opacity:0;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            setTimeout("myfunc()", 3000);
        }

        function myfunc() {
            var stupido = document.getElementsByClassName("c");
            for (var i in stupido) {
                stupido[i].style.left = 0;
            }
            document.getElementById("right").style.opacity = 1;
        }
    </script>
</head>
<body>
    <div id="main">
        <div id="left" class="c">x</div>
        <div id="right" class="c">x</div>
    </div>
</body>
</html>


无论什么
#主要{
位置：绝对位置；
顶部：200px；
左：300px；
}
c区{
宽度：200px；
高度：200px；
浮动：左；
位置：相对位置；
左：200px；
-webkit转换：左2秒；
}
#左{
背景色：淡紫色；
}
#对{
-webkit转换：不透明度2s；
背景色：三点阴影；
不透明度：0；
}
window.onload=函数（）{
setTimeout（“myfunc（）”，3000）；
}
函数myfunc（）{
var stupido=document.getElementsByClassName（“c”）；
用于（stupido中的变量i）{
stupido[i].style.left=0；
}
document.getElementById（“右”）.style.opacity=1；
}
x
x

因为

stupido

是一个

HTMLCollection

而不是数组，它的

length

属性被循环使用<代码>stupido[i]。样式===未定义，生成错误，脚本崩溃

将（stupido中的var i）的

更改为for（i=0；i你应该使用jQuery，这会让你做的事情更简单，但我不确定你的代码出了什么问题。我个人不喜欢jQuery，我想编写清晰的javascript。jQuery提供了动画和switchClass之类的功能，这是一个平滑的解决方案。在我看来，纯js不是最好的，因为你必须创建一个超时函数或类似的东西g为了让你的动画运行……我想让灰盒做和现在在这个小提琴上一样的事情，但我想让它在时间上把不透明度从0改为1？问题是transition
不累加，而是覆盖。值得注意的是：我过去也不喜欢jQuery，但我发现它太强大了，无法忽略：