Ionic angularjs button glow on ng-click - angularjs

Question

I am developing an ionic app wherein I have following requirement:
On clicking Start button the buttons starts glowing in random order for few predefined milliseconds and after it stops user is supposed to click the buttons in order they blinked within next 3 seconds. If he succeeds then Level 1 is completed.
So far, I simply have html buttons with a css that makes button glow as seen in the attached screenshot. How can I implement some method in my controller which will trigger glowing effect and handle all these time intervals? $interval seems like an option for the later one.
My 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;
}
My 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>
Also can I optimize this code?

Answer 1

I used ng-class on all the buttons to apply css on-click of Start button. I used $interval directive to activate glowing for 2 milliseconds.
My 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" ng-class="{'button1': isActive}" id="button1">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" ng-class="{'button2': isActive}" 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" ng-class="{'button3': isActive}" id="button3">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" ng-class="{'button4': isActive}" id="button4">Click me!</button>
</div>
</div>
<div align="center">
<button class="button button-bar button-dark start-button" ng-click="start()" >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>
My 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;
}
Controller
.controller('DashCtrl', function($scope, $interval) {
$scope.Timer = null;
$scope.start = function(){
$scope.isActive = !$scope.isActive;
$scope.Timer = $interval(function(){
$scope.isActive = !$scope.isActive;
$interval.cancel($scope.Timer);
}, 2000);
}
})