Angular 2では、[hidden = 'xxx]ではなくfadeIn/fadeoutが可能ですか？

Question

角2では、[hidden = 'xxx]ではなくfadeIn/fadeoutが可能ですか？

私は

<div [hidden]="visible"> 

のスニペットを持って、それが目に見える変化にフェードアウトしたい...

TX

ショーン

Answer 1

掘りいくつかは、あなたが必要とする、答えを見つけた後、 ng2でブラウザアダプタインターフェイスを使用する方法

import {Component, ViewContainerRef} from 'angular2/core'; 
import {BrowserDomAdapter} from 'angular2/platform/browser'; 

export class Filemenu { 


    private visible:boolean; 
    el:any; 
    wrapper:any; 
    bar:any; 
    viewContainer:ViewContainerRef; 
    dom = new BrowserDomAdapter(); 

    constructor(viewContainer:ViewContainerRef) { 
     this.viewContainer = viewContainer; 
     this.el = viewContainer.element.nativeElement; 
     let bar = this.dom.getElementsByTagName(this.el, 'div')[0]; 
     $(bar).fadeOut(3000,() => { 
      //notify ng2 of the changes so we comply with the framework 
      this.dom.setStyle(this.el, 'opacity', '0'); 
     }); 
     ... 

とどのようにクールな私たちは変化の枠組みを通知することを忘れないよう、我々はまだ限りのjQueryを使用することができ、ということですが...それは他の人に役立ちます願っています。

よろしく

ショーン

Answer 2

this.userName.valueChanges.debounceTime(100).subscribe(
     (value:string) => { 
      console.log('name changed, notified via observable: ', value); 
     } 
    ); 

Answer 3

私はこの1つ上の相手に少し遅れてごめんなさい。

これは非常に簡単な方法ですが、これをアプリケーションに実装しました。 CSS3のアニメーションを使用すると、クラスを追加したり減算したりできます。コンポーネントのCSSファイルの最初の

：

.show{ 
opacity: 1 !important; 
} 
.step{ 
opacity: 0; 
transition: .5s ease-in-out all; 
} 

次に、条件付き要素にクラスを追加します。

要素の位置を相対的に設定したり、スライドをページの外にアニメーション表示したりすることもできます。

Angular2がアニメーションを実装したことがある場合、条件付きでクラスを追加したり減算したりすることで、彼らがCSS3アニメーションを使用していることを保証できます。誰もがものを行うために、角の解決策を見つけるためにここに来た場合

Answer 4

は、ここにあなたがHTMLテンプレートでは

を行くコンポーネントで

<a (click)="toggle()">toggle state</a> 

<div [@visibilityChanged]="visiblityState" >  
    some content 
</div> 

//other imports.. 
import { trigger, state, transition, style, animate } from '@angular/animations' 

@Component({ 
    selector: 'some-selector', 
    templateUrl: 'my-template.html', 
    animations: [ 
    trigger('visibilityChanged', [ 
     state('shown', style({ opacity: 1 })), 
     state('hidden', style({ opacity: 0 })), 
     transition('shown => hidden', animate('600ms')), 
     transition('hidden => shown', animate('300ms')), 
    ]) 
    ] 
}) 
export class MyComponent { 
    visiblityState = 'hidden' 
    toggle() { 
    if (this.visiblityState === 'hidden') 
     this.visiblityState = 'shown' 
    else 
     this.visiblityState = 'hidden' 
    } 
}