CODEWITHSUNDEEP
angular
Naveed Ahmed
Naveed Ahmed

Reputation: 10386

Angular2 Animation on a Component

I am trying to apply a Slide Down/Up animation to a component, I have also seen the below post:

https://stackoverflow.com/a/34170712/2755616

This solution seems to work on a DIV, but in my case I have a component in a page which is shown only if certain condition is met. When that condition is true, I want the component to slide down, and when it become false again, I want it to slideup and become invisible.

Toggle Component

But this doesn't seem to work, when following guidelines provided in above stackoverflow question.

Upvotes: 0

Views: 1170

Answers (1)

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

You can modify the directive in the answer you mentioned to make it take an input of type boolean and on change of the input you display/hide the element/component. plunker with example

@Directive({
  selector : '[animate-box]',
})
export class AnimateBox {
  constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}

  @Input('animate-box')
  set animateBox(isVisible: boolean) {
    let animation = this._ab.css();
    // if isVisible is true, animate show. if it's false animate hide
  ...
  }
}

And in your component:

<some-component [animate-box]="isVisible"></some-component>

One thing to keep in mind is that in order for the animation in the plunker to work, Your element/component should have a display of type block. That's why it wasn't working for you in the first place, because components has display:inline by default.

Upvotes: 2

Related Questions