Cacher is the code snippet organizer for pro developers

import { Component } from "@angular/core";
import { trigger, state, style, transition, animate } from "@angular/animations";

@Component({
  selector: "pop-over",
  templateUrl: "pop-over.component.html",
  animations: [
    trigger("popOverState", [
      state("show", style({
        opacity: 1
      })),
      state("hide", style({
        opacity: 0
      })),
      transition("show=>hide",animate("400ms ease-out")),
      transition("hide=>show",animate("1000ms ease-in"))
    ])
  ]
})
export class PopOverComponent {
  show = false;

  constructor() { }

  get stateName() {
    return this.show ? 'show' : 'hide';
  }

  toggle() {
    this.show = !this.show;
  }
}

<div [@popOverState]="stateName">
  <p><img src="http://lorempixel.com/200/100"></p>
  <p>Hello!</p>
</div>
<button (click)="toggle()">Toggle PopOver</button>

import BrowserAnimationsModule from @angular/platform-browser/animations
import {trigger,state,style,transition,animate,keyframes,query,stagger} from @angular/animations

imports:[BrowserAnimationsModule] //on NgModule