W Angular 2, czy możliwe jest zanikanie/zanikanie zamiast [hidden = 'xxx]?

Question

W Angular 2, czy możliwe jest zanikanie/zanikanie zamiast [hidden = 'xxx]?

Mam fragment

<div [hidden]="visible"> 

i chcesz go zanikanie na widoczną zmianą ...

TX

Sean

Answer 1

po jakimś kopanie znaleźć odpowiedź, trzeba używać interfejsu karty przeglądarki w 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'); 
     }); 
     ... 

i jak fajne jest to, że możemy nadal korzystać z jQuery tak długo, jak pamiętamy, aby powiadomić ramach naszego zmian ...

nadzieję, że pomaga innym.

pozdrowienia

Sean

Answer 2

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

Answer 3

Niestety jestem trochę późno na imprezę na ten jeden.

Jest to bardzo łatwy sposób na zrobienie tego i zaimplementowałem to w mojej aplikacji. Użyj animacji CSS3, dodając i odejmując klasy.

Pierwszy składnik w pliku css:

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

Następnie warunkowo dodać klasę do elementu.

<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> 

Można również skorzystać z jakiejkolwiek własności, w tym dokonywania pozycja elementu jest względne i ożywiania zsunąć strony.

Jeśli Angular2 kiedykolwiek implementuje animacje, mogę zagwarantować, że używają animacji CSS3 przez warunkowe dodawanie i odejmowanie klas.

Answer 4

Jeśli ktoś przyjść tutaj, aby znaleźć rozwiązanie kątowego robić rzeczy, tutaj idziesz

W szablonie html

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

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

w składniku

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