adopted-ember-addons / adopted-ember-addons/ember-cli-flash

extendedTimeout, doesn't apply exiting class to component.

オープン
#117 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
355
フォーク
118
PR マージ指標
30日以内にマージされた PR はありません

説明

I'm in the process of migrating to ember-cli, using ember-cli-rails.

I wrote two components, one `flash-queue` which renders a `flash-message` component for each flash message object.

Those components work as expected and flash messages are shown. The source code of my two components and there templates can be seen below.

**flash-queue component:**

``` javascript
import Ember from 'ember';

export default Ember.Component.extend({
classNames: ['FlashQueue']
});
```

``` html


{{#each flashMessages.queue as |flash|}}
{{flash-message flash=flash}}
{{/each}}

```

**flash-message component:**

``` javascript
import Ember from 'ember';

export default Ember.Component.extend({
classNames: ['flash-message'],
classNameBindings: 'flashType',
flashType: Ember.computed('flash', function() {
return `is-${this.get('flash.type')}`;
}),

elementInserted: (function() {
var $self = this.$("#message");
$self.hide();
$self.fadeIn(500);
}).on('didInsertElement')
});
```

``` html


{{flash.message}}

```

**Scss Styling:**

We use Scss, and have some conditional styling of the `background-color` based on the presence of `is-` class. as in `is-error` would apply a red background. below is a snippet of the styles applied to the flash-message component:

``` scss
#message {
background-color: $color-notice;
color: #fff;
opacity: 1.0;
font-size: 1em;
line-height: 1.2em;
padding: 1em;
text-align: center;

&.exiting {
opacity: 0.0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
}
```

**config/environment.js**

``` js
flashMessageDefaults: {
timeout: 3000,
extendedTimeout: 1000,
priority: 200,
showProgress: true,
type: 'info',
types: ['info', 'error', 'success'],
injectionFactories: ['route', 'component', 'controller']
}
```

the fade in works (obviously) however when inspecting in the console the exiting class is never applied to the `flash-message` component.

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。