In Angular 2, ist es möglich, anstelle von [hidden = 'xxx] ein-/auszublenden?

Question

In Angular 2, ist es möglich, anstelle von [hidden = 'xxx] ein-/auszublenden?

Ich habe Snippet

<div [hidden]="visible"> 

und wollen es auf sichtbare Veränderung verblassen ...

tx

Sean

Answer 1

nach einigen die Antwort gefunden zu graben, was Sie brauchen Verwenden der Browseradapter-Schnittstelle in 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'); 
     }); 
     ... 

und wie cool ist das, können wir immer noch jQuery verwenden, solange wir daran erinnern, das Framework unserer Änderungen zu benachrichtigen ...

hoffe, es hilft anderen.

Grüße

Sean

Answer 2

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

Answer 3

Leider bin ich ein wenig spät, um die Partei auf diesem.

Dies ist eine super einfache Möglichkeit, es zu tun, und ich habe dies in meiner Anwendung implementiert. Verwenden Sie CSS3-Animationen, indem Sie Klassen hinzufügen und entfernen.

Erste in Ihrer Komponente CSS-Datei:

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

Als nächstes bedingt Ihre Klasse auf ein Element hinzuzufügen.

<div [class.show]="!booleanFromComponentClass" class="step"> 
    <h4>All of these elements will be faded out using a CSS3 opacity transition.</h4> 
    <div> 
    this element will fade out also when the booleanFromComponentClass variable is false 
    </div> 
</div> 

Sie können auch die Vorteile einer Immobilie nehmen die Position eines Elements relativ einschließlich der Herstellung und eine Folie aus der Seite Animieren.

Wenn Angular2 jemals Animationen implementiert, kann ich garantieren, dass sie CSS3-Animationen verwenden, indem Sie Klassen konditional addieren und subtrahieren.

Answer 4

Wenn jemand hier kommen Winkel Lösung zu finden, die Dinge zu tun, hier gehen Sie

In HTML-Vorlage

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

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

In Komponente

//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' 
    } 
}