Question

目前，我正试图了解液体喷射如何适用于某个组件。文档并没有真正帮助我。

基本上，我想要的是相当简单。我有两个组件，它们共同形成一个进度条。我希望进度条在进度值更改时设置动画。代码：

// progress-bar/component.js
import Ember from 'ember';

export default Ember.Component.extend({

    classNames: ['progress'],
    attributeBindings: ['progressBarRole:role', 'tabIndex:tabindex', 'progress:aria-valuenow', 'ariaValueMin:aria-valuemin', 'ariaValueMax:aria-valuemax'],

    progressBarRole: 'progressbar',
    tabIndex: 0,
    ariaValueMin: 0,
    ariaValueMax: 100,

});

// progress-bar/template.hbs
{{progress-bar/progress-meter total=total progress=progress}}

// progress-bar/progress-meter/component.js
import Ember from 'ember';

export default Ember.Component.extend({

    classNames: ['progress-meter'],
    attributeBindings: ['widthValue:style'],

    widthValue: function() {
        var progress = ( this.get('progress') / ( this.get('total') ) ) * 100;
        return Ember.String.htmlSafe( 'width: ' + progress + '%' );
    }.property('progress')

});

// progress-bar/progress-meter/template.hbs is empty.

我尝试过的是：

{{#liquid-bind model.progress}}
   {{progress-bar total=100 progress=model.progress}}
{{/liquid-bind}}

但这根本不起作用。我也尝试在进度表组件中使用animate（）函数，但没有任何运气。老实说，我还没有找到如何完成这项工作的线索。

希望有人能指出我正确的方向！非常感谢。

更新经过大量的实验，我设法使用以下代码在一定程度上应用动画：

// template.hbs
{{#liquid-bind model.progress class="progress-transition" as |currentModel|}}
   {{progress-bar total=100 progress=currentModel}}
{{/liquid-bind}}

// app/transitions.js
export default function() {
 this.transition(
    this.hasClass('progress-transition'),
    this.toValue(true),
    this.use('fade', { duration: 500 })
 );
}

当更新model.progress时，这将淡入淡出进度条。我不需要在这里褪色，而是需要动画宽度的东西。我发现了一个弹性增长过渡，但这并不起作用。也许用velocity.js参数进行比例转换是这里的方法。我只是不知道该怎么做。

Ember液体火焰进度条动画

0 个答案: