Question

我正在开发一种离子应用程序，其中我有以下要求：

点击开始按钮后，按钮会以随机顺序开始发光几个预定义的毫秒，停止后，用户应按下按钮，以便在接下来的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

  def drama_params
    params.require(:drama).permit(trailerlinks_attributes: [:name, :traurl, :id, :_destroy])
  end

我的CSS

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

<强>控制器

.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;

}

离子angularjs按钮在ng-click上发光

1 个答案: