Question

名为“收藏集”的链接应该是启动以下所有动画的链接。目前，刷新页面时，动画按照我的意愿运行。如何将触发器从刷新/启动页面更改为点击？别介意我的HTML凌乱，只需要知道如何通过单击即可触发这些动画...

                <div class="menu-hover">
                    <a href="#">
                        <h1>Season</h1>
                    </a>
                </div>

                <div class="menu-hover">
                    <a href="#">
                        <h1 class="trigger">Collection's</h1>
                    </a>
                </div>

                <div class="menu-hover">
                    <a href="#">
                        <h1>My account</h1>
                    </a>
                </div>

            </div>

            <a href="#">
                <h2 id="sub1" class="hidden-h2 animated bounceInLeft">For me</h2>
            </a>

            <a href="#">
                <h2 id="sub2" class="hidden-h2 animated bounceInRight">Furry friend</h2>
            </a>

            <a href="#">
                <h2 id="sub3" class="hidden-h2 animated bounceInLeft">Ambient</h2>
            </a>

            <a href="#">
                <h2 id="sub4" class="hidden-h2 animated bounceInRight">Home</h2>
            </a>

            <a href="#">
                <h2 id="sub5" class="hidden-h2 animated bounceInLeft">DustOnLens</h2>
            </a>

            <a href="#">
                <h2 id="sub6" class="hidden-h2 animated bounceInRight">Tilbehöör</h2>
            </a>

            <a href="#">
                <h2 id="sub7" class="hidden-h2 animated bounceInLeft">Coolio</h2>
            </a>

            <a href="#">
                <h2 id="sub8" class="hidden-h2 animated bounceInRight">?Mystery?</h2>
            </a>

        </div>

动画是通过CSS计时的。

    /* animations */
#sub1{
    animation-delay: 0s;
}

#sub2{
    animation-delay: 0.1s;
}

#sub3{
    animation-delay: 0.2s;
}

#sub4{
    animation-delay: 0.3s;
}

#sub5{
    animation-delay: 0.4s;
}

#sub6{
    animation-delay: 0.5s;
}

#sub7{
    animation-delay: 0.6s;
}

#sub8{
    animation-delay: 0.7s;
}

Answer 1

您可以为指定的onclick元素分配一个简单的h2事件处理程序，该事件处理程序将为您要设置动画的元素分配（切换）特定的类。如果将初始animation-play-state设置为paused，则可以在新类中分配running的值以开始动画。

不知道使用的所有CSS类还是希望为动画编写多个类，以下内容对所有元素使用了非常简单的动画〜您将不得不替换真实的动画。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Trigger CSS Animations by clicking link</title>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
                document.querySelector('.trigger').addEventListener('click',()=>{
                    Array.from( document.querySelectorAll( '.animated' ) ).forEach( div=>{
                        div.classList.toggle('activated')
                    })
                });
            })
        </script>
        <style>
            .animated{
                animation-play-state:paused;
            }
            .activated{
                animation-play-state:running
            }

            .bounceInLeft,
            .bounceInRight,
            .bounceInLeft,
            .bounceInRight,
            .bounceInLeft,
            .bounceInRight,
            .bounceInLeft,
            .bounceInRight{
                opacity:1;
                color:black;
                font-size:1.5rem;

                animation-duration:2s;
                animation-name:geronimo;
                animation-direction:normal;
                animation-fill-mode:forwards;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }


            @keyframes geronimo{
                from{opacity:1;color:black}
                50%{color:red}
                to{opacity:0;color:blue;}
            }




            /* animations */
            #sub1{
                animation-delay: 0s;
            }
            #sub2{
                animation-delay: 0.1s;
            }
            #sub3{
                animation-delay: 0.2s;
            }
            #sub4{
                animation-delay: 0.3s;
            }
            #sub5{
                animation-delay: 0.4s;
            }
            #sub6{
                animation-delay: 0.5s;
            }
            #sub7{
                animation-delay: 0.6s;
            }
            #sub8{
                animation-delay: 0.7s;
            }
        </style>
    </head>
    <body>

        <div>
            <div class="menu-hover">
                <a href="#">
                    <h1>Season</h1>
                </a>
            </div>
            <div class="menu-hover">
                <a href="#">
                    <h1 class="trigger">Collection's</h1>
                </a>
            </div>
            <div class="menu-hover">
                <a href="#">
                    <h1>My account</h1>
                </a>
            </div>
         </div>

         <div>
            <a href="#"><h2 id="sub1" class="hidden-h2 animated bounceInLeft">For me</h2></a>
            <a href="#"><h2 id="sub2" class="hidden-h2 animated bounceInRight">Furry friend</h2></a>
            <a href="#"><h2 id="sub3" class="hidden-h2 animated bounceInLeft">Ambient</h2></a>
            <a href="#"><h2 id="sub4" class="hidden-h2 animated bounceInRight">Home</h2></a>
            <a href="#"><h2 id="sub5" class="hidden-h2 animated bounceInLeft">DustOnLens</h2></a>
            <a href="#"><h2 id="sub6" class="hidden-h2 animated bounceInRight">Tilbehöör</h2></a>
            <a href="#"><h2 id="sub7" class="hidden-h2 animated bounceInLeft">Coolio</h2></a>
            <a href="#"><h2 id="sub8" class="hidden-h2 animated bounceInRight">?Mystery?</h2></a>
        </div>

    </body>
</html>

document.addEventListener('DOMContentLoaded',()=>{
document.querySelector('.trigger').addEventListener('click',()=>{
	Array.from( document.querySelectorAll( '.animated' ) ).forEach( div=>{
		div.classList.toggle('activated')
	})
});
})

.animated{
	animation-play-state:paused;
}
.activated{
	animation-play-state:running
}

.bounceInLeft,
.bounceInRight,
.bounceInLeft,
.bounceInRight,
.bounceInLeft,
.bounceInRight,
.bounceInLeft,
.bounceInRight{
	opacity:1;
	color:black;
	font-size:1.5rem;
	
	animation-duration:2s;
	animation-name:geronimo;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


@keyframes geronimo{
	from{opacity:1;color:black}
	50%{color:red}
	to{opacity:0;color:blue;}
}




/* animations */
#sub1{
	animation-delay: 0s;
}
#sub2{
	animation-delay: 0.1s;
}
#sub3{
	animation-delay: 0.2s;
}
#sub4{
	animation-delay: 0.3s;
}
#sub5{
	animation-delay: 0.4s;
}
#sub6{
	animation-delay: 0.5s;
}
#sub7{
	animation-delay: 0.6s;
}
#sub8{
	animation-delay: 0.7s;
}

<div>
	<div class="menu-hover">
		<a href="#">
			<h1>Season</h1>
		</a>
	</div>
	<div class="menu-hover">
		<a href="#">
			<h1 class="trigger">Collection's</h1>
		</a>
	</div>
	<div class="menu-hover">
		<a href="#">
			<h1>My account</h1>
		</a>
	</div>
 </div>
 
 <div>
	<a href="#"><h2 id="sub1" class="hidden-h2 animated bounceInLeft">For me</h2></a>
	<a href="#"><h2 id="sub2" class="hidden-h2 animated bounceInRight">Furry friend</h2></a>
	<a href="#"><h2 id="sub3" class="hidden-h2 animated bounceInLeft">Ambient</h2></a>
	<a href="#"><h2 id="sub4" class="hidden-h2 animated bounceInRight">Home</h2></a>
	<a href="#"><h2 id="sub5" class="hidden-h2 animated bounceInLeft">DustOnLens</h2></a>
	<a href="#"><h2 id="sub6" class="hidden-h2 animated bounceInRight">Tilbehöör</h2></a>
	<a href="#"><h2 id="sub7" class="hidden-h2 animated bounceInLeft">Coolio</h2></a>
	<a href="#"><h2 id="sub8" class="hidden-h2 animated bounceInRight">?Mystery?</h2></a>
</div>

一键触发多个CSS动画

1 个答案: