Question

我定义了一个Ember组件，当我点击一个按钮时，我正在切换一个显示该组件的属性。

我需要在显示组件时应用一些动画效果。 SlideDown / SlideUp等动画效果。

我不确定如何为Ember Components提供动画效果。

模板：

<script type="text/x-handlebars" data-template-name="index">
    <button {{action 'showDiv'}}>Show Div</button>
    <br>
    <br>
    {{#if showDiv}}
        {{temp-animation}}
    {{/if}}
</script>

App.js：

App.IndexRoute = Ember.Route.extend({
    actions:{
    showDiv: function(){
        this.controller.toggleProperty('showDiv');
    }
    }
});

App.IndexController = Ember.Controller.extend({
    showDiv:false
});

JSBIn Demo

Answer 1

您需要利用组件上的didInsertElement事件。

这是一个工作小提琴：http://jsbin.com/poxupuso/1/edit

我重构了你的代码。将操作拉出路线并将其放入控制器中。

App.IndexRoute = Ember.Route.extend({});

App.IndexController = Ember.Controller.extend({
  showDiv:false,
  actions:{
    showDiv: function(){
      this.toggleProperty('showDiv');
    }
  }
}); 

App.TempAnimationComponent = Ember.Component.extend({
  didInsertElement: function () {
    this.$('.animdiv').slideDown();
  }
});

我还将display:none添加到.animdiv，以便我们可以从隐藏状态设置动画。

.animdiv{
  width:200px;
  height:100px;
  border: 1px solid red;
  display: none;
}

这显然是最基本的例子。祝你好运！

灰烬组件：显示组件时的动画效果

1 个答案: