有没有办法在我使用 CSS 按下按钮后启动动画？ 我见过一些解决方案，但你必须使用我不知道该怎么做的 JS。 所以我的想法是你进入网站，然后当你按下“显示更多”按钮时，5 列会像现在一样滑出。然后，当您再次按下它时，它们会向下滑动。 如果您想可视化我在说什么，可以使用以下代码。
html, body {margin: 0; height: 100%; overflow: hidden}
#show-more
{
background: #1594e5;
color: #fff;
font-family: calibri;
display: block;
border-radius: 25px;
width: 140px;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
text-align: center;
margin: 20px auto;
cursor: pointer;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
}
.container
{
width: 100%;
height: 100%;
}
img
{
max-width: 100%;
height: auto;
position: relative;
top: 33%;
}
.obj1
{
width: 20%;
height: 100%;
background: rgb(136, 44, 44);
float:left;
position: relative;
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 0.1s;
}
.obj2
{
width: 20%;
height: 100%;
background: rgb(104, 56, 92);
position: relative;
float:left;
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 0.3s;
}
.obj3
{
width: 20%;
height: 100%;
background: rgb(0, 0, 0);
position: relative;
float:left;
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 0.5s;
}
.obj4
{
width: 20%;
height: 100%;
background: rgb(42, 75, 148);
position: relative;
float:left;
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: .7s;
}
.obj5
{
width: 20%;
height: 100%;
background: rgb(72, 114, 48);
position: relative;
float:left;
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: .9s;
}
.obj6
{
width: 20%;
height: 100%;
background: rgb(119, 39, 112);
position: relative;
float:left;
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.1s;
}
@keyframes slide-top
{
0% {transform: translateY(0);}
100% {transform: translateY(-100%);}
}<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container"></div>
<div class="obj1">
</div>
<div class="obj2">
</div>
<div class="obj3"></div>
<div class="obj4"></div>
<div class="obj5"></div>
<a id="show-more">Show More</a>
</body>最佳答案
你可以使用 javascript 和 css 来做到这一点
首先，您必须将动画分离到一个新类中，向您的对象元素添加一个额外的类，并添加一个默认动画“向下滑动”:
CSS:
.start-animaton {
animation: slide-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 0.1s;
}
.my-obj {
animation: slide-down 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-down {
0% { transform: translateY(-100%); }
100% { transform: translateY(0); }
}
HTML :
<div class="my-obj obj1"></div>
<div class="my-obj obj2"></div>
<div class="my-obj obj3"></div>
<div class="my-obj obj4"></div>
<div class="my-obj obj5"></div>
然后添加一个 javascript，当您单击一个按钮时，它将在您的对象上切换类“开始动画”
document.querySelector('#show-more').addEventListener('click', function() {
var elements = document.querySelectorAll('.my-obj');
var arrElements = Array.from(elements);
var delay = 100;
arrElements.forEach(function(e) {
setTimeout(function() {
e.classList.toggle('start-animaton');
}, delay);
delay += 300;
});
});
这是一个工作 fiddle :https://jsfiddle.net/gadawag/1ny9v6hr/25/
关于html - 按下按钮后切换 CSS 中的关键帧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55348492/