Question

我有一些css动画由一些javascript代码控制，但动画不适用于它所分配的所有部分。我有一个由div组成的列表，但动画只影响第一个。关于如何使它适用于具有相同ID的所有部分的任何想法，在本例中为“下载”？

以下是代码：

<script language="javascript">
    window.onload = function() {
    var btn = document.getElementById("download");
    btn.addEventListener("click", function(e) {
    this.className = "animated";
});

btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
btn.addEventListener("oanimationend", fadeOutUpEnd, false);
btn.addEventListener("animationend", fadeOutUpEnd, false);
}

function fadeOutUpEnd(e) {
    e.currentTarget.className = "";
}
</script>

Heres是CSS动画：

.animated { 

}
.animated {
-webkit-animation:fadeOutUp 1s;
-moz-animation:fadeOutUp 1s;
-o-animation:fadeOutUp 1s;
-ms-animation:fadeOutUp 1s;
animation:fadeOutUp 1s;
}

@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}

100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}

100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}

100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
transform: translateY(-20px);
}
}

.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}

这是HTML：

<div class="list_block">
        <!-- ******** Block Logo ******** -->  
            <section id="section_1">
                    <img name="SLogo" src="images/ASC.jpg" width="100%" height="100%" alt="" />
            </section>
            <!-- ******** Block Title & Description ******** -->  
              <section id="section_2">
                    <section id="title">
                        Advanced SystemCare
                    </section>
                <section id="description">
                        Advanced SystemCare 6 Free takes a one-click approach to protect, repair, clean, and optimize your PC. It's easy to use and 100% safe with no adware, spyware, or viruses.
                </section>
              </section>
            <!-- ******** Block Version ******** -->  
                <section id="section_3">
                    <section id="version">
                        VERSION:
                    </section>
                    <section id="vnumber">
                        6.2.0
                    </section>
                <br />
            <!-- ******** Block Color ******** -->
                    <img name="color" src="images/Ranks/l-m.jpg" width="100" height="20" alt="" />
                <br />
                <br />
            <!-- ******** Block Date ******** -->  
                    <section id="date">
                        DATE:
                    </section>
                    <section id="dnumber">
                        6/13/2013
                    </section>
                </section>
            <!-- ******** Block Download Links ******** -->  
                <section id="section_4">
                    <a href="software/ASC.zip">
                    <section id="download" title="Download ASC">
                        Download
                    </section>
                </a>
                 <br />
                    <a href="http://www.iobit.com/advancedsystemcareper.php#none">
                        <section id="visit" title="Visit the ASC Website">
                            Visit Site
                        </section>
                    </a>
                </section>
          </div>
         <br />




            <div class="list_block">
            <!-- ******** Block Logo ******** -->  
                <section id="section_1">
                    <img name="SLogo" src="images/ATFCleaner.jpg" width="100%" height="100%" alt="" />
                </section>
            <!-- ******** Block Title & Description ******** -->  
              <section id="section_2">
                    <section id="title">
                        ATF Cleaner
                    </section>
                <section id="description">
                        ATF Cleaner will clean out your temp folder in a quick and safe manor. Recommended for Windows XP but has had success with Vista and 7.
                </section>
              </section>
            <!-- ******** Block Version ******** -->  
                <section id="section_3">
                    <section id="version">
                        VERSION:
                    </section>
                    <section id="vnumber">
                        3.0.0.2
                    </section>
                <br />
            <!-- ******** Block Color ******** -->
                    <img name="color" src="images/Ranks/l.jpg" width="100" height="20" alt="" />
                <br />
                <br />
            <!-- ******** Block Date ******** -->  
                    <section id="date">
                        DATE:
                    </section>
                    <section id="dnumber">
                        6/13/2013
                    </section>
                </section>
            <!-- ******** Block Download Links ******** -->  
                <section id="section_4">
                    <a href="software/ATFCleaner.exe">
                        <section id="download" title="Download ATF-Cleaner">
                            Download
                        </section>
                    </a>
                 <br />
                    <a href="http://www.atribune.org/?option=com_content&task=view&id=25&Itemid=25">
                        <section id="visit" title="Visit the ATF-Cleaner Website">
                            Visit Site
                        </section>
                    </a>
                </section>
            </div>
         <br />

Answer 1

我首先考虑推荐使用document.getElementsByClassName而不是document.getElementById，因为getElementById会根据ID返回单个元素。

你不应该有多个具有相同ID的元素（参见：here），因为ID应该标识元素，因此必须是唯一的。

另一方面，

getElementsByClassName将返回一个您需要迭代的数组。

在您的情况下，此方法没有用，因为您要为返回的元素指定类名，如果您可以提前设置特定的类名，则无需对这些元素执行JavaScript操作

但是，所有这些元素都是SECTION标记，因此您可以使用document.getElementsByTagName。

在HTML中 - 将每个元素的id设置为以计数器为后缀，因此它们都是唯一的（如果页面是由服务器代码动态生成的，则应更改服务器代码）。

然后你可以在JavaScript中迭代结果数组 - 检查'download'的id前缀。如果为true，请将类名设置为“动画”。

window.onload = function() {
    var sections = document.getElementsByTagName("section");
    for(i in sections)
    {
        var btn = sections[i];
        if (btn && btn.getAttribute)
        {
            var id = btn.getAttribute('id');
            if (null != id && 0 == id.indexOf("download"))
            {
                btn.addEventListener("mouseOver", function(e) { this.className = "animated"; });
                btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
                btn.addEventListener("oanimationend", fadeOutUpEnd, false);
                btn.addEventListener("animationend", fadeOutUpEnd, false);
            }
        }
    }
};

CSS和JavaScript动画不适用于所有部分

1 个答案: