Execute animation in angular 4 on click only not on page load

Question

I have a input field which displays on page load.

On click of search i'm displaying result.

On click of hide your search parameter i'm hiding search input and on click of show i'm showing it.

But the problem is that as i have applied slide in on search input field which load on page load it is animating. I want to add animation only when i click on hide or show your search parameter link.

This is what i have tried so far

<div class="row seven-cols" *ngIf="showSearch" [@slideIn]>
            <div class="col-md-2">
        <input class="form-control" placeholder="Store#">
                    </div>
                    <!-- Search Button -->
    <button type="button"[disabled]="isValidStoreId || !storeMod"
                            (click)="search(storeMod)">
                            {{componentContents.searchButton}}
                        </button>
                </div>

This is the code to toggle search

<span class="filterPipe"><a href="javascript:void(0)" (click)="showSearch = !showSearch" class="toggleTxt">{{ showSearch == true ? 'Hide' : 'Show' }} {{componentDetails.searchToggleHead}}</a></span>

this is the code for my slide in/out animation

 animations: [
    trigger('slideIn', [
      state('*', style({ 'overflow-y': 'hidden' })),
      state('void', style({ 'overflow-y': 'hidden' })),
      transition('* => void', [
        style({ height: '*' }),
        animate(250, style({ height: 0 }))
      ]),
      transition('void => *', [
        style({ height: '0' }),
        animate(250, style({ height: '*' }))
      ])
    ])
  ]

Please suggest me how to handle this?

Answer 1

You are using * => void and void => * which are equivalent to :enter and :leave. They're fired every time the element appears/disappears (using *ngIf).

To control the animation and fire it just on click, you should use custom transitions (active => inactive and inactive => active in my code below).

Change your animation like this:

animations: [
  trigger('slideIn', [
    state('active', style({ 'overflow-y': 'hidden' })),
    state('inactive', style({ 'overflow-y': 'hidden' })),
    transition('active => inactive', [
      style({ height: '*' }),
      animate(250, style({ height: 0 }))
    ]),
    transition('inactive => active', [
      style({ height: '0' }),
      animate(250, style({ height: '*' }))
    ])
  ])
]

Then in your HTML, remove *ngIf and use the animation like this:

<div class="row seven-cols" [@slideIn]="showSearch?'active':'inactive'">

I haven't tested the code. But it should work. Let me know if there's any error.

If you have to use *ngIf

If using *ngIf is necessary, you can have another variable and switch it on and off on animation done. Like this:

(@slideIn.done)="animDone($event)"

And

animDone(e: AnimationEvent) => {
  if (e.toState === 'active') showSearchNgIf = true;
  else if (e.toState === 'inactive') showSearchNgIf = false;
}