Question

我有像这样的跨区域

<span class="blinky">I'm blinking</span>

现在我想让它眨眼。在vanilla JS中，我会使用jQuery编写一段简单的代码，为此开始一段时间。

但是：如何以正确的方式在ember中实现此功能？

Answer 1

我为闪烁写了一个完整的解决方案

首先，让我们创建用于闪烁的CSS

.blinky {
  animation: changecolor 0.5s infinite;
  -moz-animation: changecolor 0.5s infinite;
  -webkit-animation: changecolor 0.5s infinite;
  -ms-animation: changecolor 0.5s infinite;
  -o-animation: changecolor 0.5s infinite;
}

@keyframes changecolortask {
  0% {
    color: @pre-text-color;
  }
  100% {
    color: @pre-text-color;
    border: 2px solid @blink-bg;
  }
}


/* Mozilla Browser */

@-moz-keyframes changecolortask {
  0% {
    color: @pre-text-color;
  }
  100% {
    color: @pre-text-color;
    border: 4px solid @blink-bg;
  }
}


/* WebKit browser Safari and Chrome */

@-webkit-keyframes changecolortask {
  0% {
    color: @pre-text-color;
  }
  100% {
    color: @pre-text-color;
    border: 4px solid @blink-bg;
  }
}


/* IE 9,10*/

@-ms-keyframes changecolortask {
  0% {
    color: @pre-text-color;
  }
  100% {
    color: @pre-text-color;
    border: 4px solid @blink-bg;
  }
}


/* Opera Browser*/

@-o-keyframes changecolortask {
  0% {
    color: @pre-text-color;
  }
  100% {
    color: @pre-text-color;
    border: 4px solid @blink-bg;
  }
}

@keyframes changecolor {
  0% {
    color: @pre-text-color;
    background: @pre-bg;
  }
  100% {
    color: @pre-text-color;
    background: @blink-bg;
  }
}


/* Mozilla Browser */

@-moz-keyframes changecolor {
  0% {
    color: @pre-text-color;
    background: @pre-bg;
  }
  100% {
    color: @pre-text-color;
    background: @blink-bg;
  }
}


/* WebKit browser Safari and Chrome */

@-webkit-keyframes changecolor {
  0% {
    color: @pre-text-color;
    background: @pre-bg;
  }
  100% {
    color: @pre-text-color;
    background: @blink-bg;
  }
}


/* IE 9,10*/

@-ms-keyframes changecolor {
  0% {
    color: @pre-text-color;
    background: @pre-bg;
  }
  100% {
    color: @pre-text-color;
    background: @blink-bg;
  }
}


/* Opera Browser*/

@-o-keyframes changecolor {
  0% {
    color: @pre-text-color;
    background: red;
  }
  100% {
    color: @pre-text-color;
    background: @blink-bg;
  }
}

然后你想在控制器中使用它，路由或组件声明

 blinky: null,

现在我们需要有一个动作，或者你需要初始化它取决于你想如何使用它，让我们假设你想在点击一个按钮的同时添加这个Blinky类3秒，这样我们就可以了以下代码：

actions: {
    myChangeColor: function() {
      this.set('blinky', 'blinkery');//set your class to property 
      // remove blinker after 1 sec, it must be passed to reference for 'this' so easily we can bind that.
      setTimeout(function() {
        this.set('blink', ' ');
      }.bind(this), 3000);
    }
  }

现在您需要在模板中使用它，例如在我的示例中，您只需在适当的模板行中添加此属性，如：

 <div class="row well {{blinky}}">  //whatever </div>

现在假设你有一个myChangeColor动作

的按钮

 <button type="submit" class="btn btn-success btn-block" {{action "blinky"}}>make me blinky for 3 seconds !</button>

就是这样。

取决于你想要什么以及你想如何使用这个动作和类，你可以用不同的方式实现它。但是，实现的方式是相同的。

注意：您还可以使用animation.css库来获得更多课程，您可以在操作中添加您的Vanilla javascript代码。

如果要在组件中使用此功能取决于您的使用方式，则可能需要使用didInsertElement() {}和willDestroyElement() {}。作为示例，请参阅以下代码：

let blinker;
export default Ember.Component.extend({
  tagName: 'span',
  blink: null,
  interval: 3000,

  init() {
    this._super(...arguments);
    this.set('blink','');
  },
  didInsertElement() { // when you enter route
    this._super(...arguments);

    blinker = setInterval(function() { 
      this.set('blink', 'blinky');
    }.bind(this), this.get('interval'));
  },
  willDestroyElement() {  // when you leave route 
    this._super(...arguments);
    clearInterval(blinker);
  }
});

我希望这可以帮到你。

Ember：如何用间隔编写脚本

1 个答案: