In Angular 2, is it possible to fadeIn / fadeout instead of [hidden='xxx]?

Question

In Angular 2, is it possible to fadeIn / fadeout instead of [hidden=\'xxx]?

I have snippet of

and wa

Answer 1

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

Answer 2

Sorry I'm a little late to the party on this one.

This is a super easy way to do it and I've implemented this in my application. Use CSS3 animations by adding and subtracting classes.

First in your component css file:

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

Next, conditionally add your class to an element.

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

You can also take advantage of any property including making an element's position relative and animating a slide off of the page.

If Angular2 ever implements animations, I can guarantee they are using CSS3 animations by conditionally adding and subtracting classes.

Answer 3

If anyone come here to find angular solution to do the stuff, here you go

In html template

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

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

In component

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

Answer 4

Css only solution. Add class 'step' and [class.show]="fadeInIfTrue" to block you want to fade.

css:

.step {
  display: none;
  opacity: 0;

  &.show {
    display: block;
    transform: scale(1);
    opacity: 1;
    animation: anim .7s ease-in-out;
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transition: .7s ease-in-out all;
  }
  100% {
    opacity: 1 !important;
  }
}

source - https://jdsteinbach.com/css/snippet-animate-display-transform/

Answer 5

after some digging found the answer, you need to use the Browser Adapter interface 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');
        });
         ...

and how cool is that, we can still use jQuery as long as we remember to notify the framework of our changes...

hope it helps others.

regards

Sean