html - 按下按钮后在 CSS 中切换关键帧?
问题描述
使用 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;
});
});
推荐阅读
- amazon-web-services - 如何计算 CloudWatch 日志中 IP 地址的出现次数
- python - 在 Azure 认知服务上更改 SpeechRecognizer 语言
- messaging - WAMP 协议没有被广泛采用的原因是什么?
- android - 目标 SDK 28 和蓝牙连接问题
- office-js - Office.js Excel:格式化并写入可见 cel
- python - 仅使用 panda 替换数据框中的值(不使用 numpy)
- mysql - 无法创建模式 - MySQL Workbench
- php - 在 PHP 5.6 上安装 OCI8 失败
- database - PyQt 在 tableview 中加载数据库
- php - &符号在 XML 文档中显示为“&”