javascript - Ember.js-在if语句中淡入

我想平滑消除某个字段的错误，并且在解决Ember.js的流程时遇到一些问题。此刻，误差范围突然弹出并弹出而没有影响。我的索引模板如下所示。

<script type="text/x-handlebars" data-template-name="index">
     <div class="errorbox">
          {{#if error }}
          <span class="error">
               {{ error }}
          </span>
          {{/if}}
     </div>

     <label>What is your name?</label>
     {{input type="text" action="type" value=username }}
</script>

和我的控制器：

App.IndexController = Ember.ObjectController.extend({
     actions: {
          type: function() {
               if (this.get('username').length > 10) this.set('error', 'Username beyond length!');
               else this.set('error', null);
          }
     },

     /* properties */
     error: false,
     username: false
});

有没有简单的方法可以做到这一点？

最佳答案

一种简单的方法是使用CSS动画来制作效果：

.error {
  -webkit-animation: fadeIn 1s ease;
          animation: fadeIn 1s ease;
}

@-webkit-keyframes { from { opacity: 0.0 } to { opacity: 1.0 } }
@keyframes         { from { opacity: 0.0 } to { opacity: 1.0 } }

示例：http://emberjs.jsbin.com/jikexepa/1/edit?css,output

关于javascript - Ember.js-在if语句中淡入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23209778/