イオンangularjsボタングロー私は要件以下のいる前記私はイオンのアプリを開発しています

Question

NGクリックミリ秒後に停止すると、ユーザーは次の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> 

はまた、私はこのコードを最適化することができますか？

Answer 1

すべてのボタンにng-classを使用して、ボタンをクリックしてCSSを適用しました。私は$ intervalディレクティブを使用して、2ミリ秒間グローを起動しました。

マイ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> 

マイ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('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); 

    } 

})