【发布时间】：2016-06-30 23:20:38
【问题描述】：
我正在开发一个离子应用程序，其中我有以下要求：
点击开始按钮后，按钮开始以随机顺序闪烁几个预定义的毫秒数，停止后用户应该按顺序在接下来的 3 内闪烁秒。如果他成功了，那么 1 级就完成了。
到目前为止，我只是有一个带有 css 的 html 按钮，可以使按钮发光，如所附屏幕截图所示。如何在我的控制器中实现一些方法来触发发光效果并处理所有这些时间间隔？ $interval 似乎是后者的一个选项。
我的 CSS：
.large_button {
line-height: 10vh !important;
width: 50%;
}
.start-button {
line-height: 5vh !important;
width: 15%;
}
.button {
background-color: #004A7F;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
}
@-webkit-keyframes glowing1 {
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}
@-webkit-keyframes glowing2 {
0% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
50% { background-color: #7CFC00; -webkit-box-shadow: 0 0 40px #7CFC00; }
100% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
}
@-webkit-keyframes glowing3 {
0% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
50% { background-color: #FFFF00; -webkit-box-shadow: 0 0 40px #FFFF00; }
100% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
}
@-webkit-keyframes glowing4 {
0% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
50% { background-color: #1E90FF; -webkit-box-shadow: 0 0 40px #1E90FF; }
100% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
}
#button1 {
-webkit-animation: glowing1 1000ms infinite;
}
#button2 {
color: #000000;
-webkit-animation: glowing2 1000ms infinite;
}
#button3 {
color: #B8860B;
-webkit-animation: glowing3 1000ms infinite;
}
#button4 {
-webkit-animation: glowing4 1000ms infinite;
}
我的 HTML：
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div padding align="center">
<h2>Please select a button!</h2>
</div>
<!-- First row of buttons -->
<div class="row">
<!-- First column -->
<div class="col col-50 col-offset-10" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button1">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button2">Click me!</button>
</div>
</div>
<div class="row">
<!-- First column -->
<div class="col col-50 col-offset-10" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button3">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button4">Click me!</button>
</div>
</div>
<div align="center">
<button class="button button-bar button-dark start-button" ng-click="startAnimation()">Start</button>
</div>
<div align="left" style="padding-left:5cm;padding-top:1cm;">
<h1>Level 1
<i class="icon ion-android-checkbox"></i></h1>
</div>
</ion-content>
</ion-view>
我也可以优化这段代码吗？
【问题讨论】：