我正在尝试创建一个 Web 演示文稿，并想添加一个 2 半的小动画，它会在单击时上下移动(目前有效)，但我也希望它们在单击后保持在那里。
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg 0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
这是我的代码:HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
然后制作动画:
#btn_logo:active #up
和
#btn_logo:active #down
我怎样才能让动画结束后切换？
最佳答案
您应该做的是在 CSS 类上设置动画，然后在单击时简单地添加或删除 CSS 类。
像这样:https://jsfiddle.net/8troo8bw/1/
(或者您的确切 html):https://jsfiddle.net/8troo8bw/2/
这里的关键是动画:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
以及添加类的相关JS:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});
关于javascript - CSS制作:active toggled，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40869885/