Slide Up/Down Effect with Ng-Show and Ng-Animate

Slide up/down effect with ng-show and ng-animate

I've written an Angular directive that does slideToggle() without jQuery.

https://github.com/EricWVGG/AngularSlideables

Slide down/up with ngAnimate?

Edit:

Looks like it can be done with CSS:

.animate-show {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-show.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

so just add class="animate-show" for the div

https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

a working example:

http://plnkr.co/edit/xmkBjvPY5OjFLnxcuVKz?p=preview&s=jBzeCEpWphlOpSRv

Angular ng-show / hide animations

Please see that demo : http://plnkr.co/edit/N6fPYgipvML2rzmEt4So?p=preview

it looks like you need to change a bit structure of your DOM

<ul>
  <li ng-repeat="item in data">
    <p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>

  <p  class="cssSlideUp"  ng-hide="example1">
    DOB: {{item.dob}}
    Gender: {{item.gender}}
    </p>
  </li>
</ul>

Angular (4, 5, 6, 7) - Simple example of slide in out animation on ngIf

First some code, then the explanation. The official docs describing this are here.

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

In your template:

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

I found the angular way a bit tricky to grasp, but once you understand it, it quite easy and powerful.

The animations part in human language:

• We're naming this animation 'slideInOut'.

• When the element is added (:enter), we do the following:

• ->Immediately move the element 100% up (from itself), to appear off screen.

• ->then animate the translateY value until we are at 0%, where the element would naturally be.

• When the element is removed, animate the translateY value (currently 0), to -100% (off screen).

The easing function we're using is ease-in, in 200 milliseconds, you can change that to your liking.

Hope this helps!

Slide up/down animation with fadein/out effect

An animation like

  animations: [
    trigger('flyInOut', [
      state('in', style({ opacity:1,transform: 'translateY(0)' })),
      transition('void => *', [
        style({ opacity:0,transform: 'translateY(100%)' }),
        animate(200)
      ]),
      transition('* => void', [
        animate(200, style({ opacity:0,transform: 'translateY(100%)' }))
      ])
    ])
  ]

must make the job in a .html like

  <button (click)="toogle=!toogle">click</button>
  <div [@flyInOut] *ngIf="toogle" >
    hello word <button (click)="toogle=false">x</button>
  </div>

See stackblitz

ng-show doesn't keep up with ng-animation for scaling down in a dropdown

UPDATE:

After a litte bit trial and error I think I found a SOLUTION.
If you animate not the div around (sub-menu) your md-menu-items but the item itself, it will work.

I just added ng-if="menuIsOpen===1" to your md-menu-item (deleted the ng-show="menuIsOpen===1 from the sub-menu) and changed the animation as follows:

md-menu-item.ng-enter{
    -webkit-animation:3s move ease;
    animation:3s move ease;
}

@-webkit-keyframes move {
    From {
        margin-bottom:-50px;
    }
    To {
        margin-bottom:0px;
    }
}

@keyframes move {
    From {
        margin-bottom:-50px;
    }
    To {
        margin-bottom:0px;
    }
}

Now the size of every item in the menu is animated.
I cheated a little bit with margin-bottom, but height was still not working.

---

I think you have two options. ( At least I can't think of anything more.)
Or maybe three, see above.

1.You can change the height and add transform-origin: top; like here:

    @keyframes scaleIn {
  From {
     transform-origin:  top;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    height: 0px;
  }
  To {
     transform-origin:  top;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    height: 190px;
  }
}

With transform-origin it will scale from the top and not from the middle.
BUT then you have to adjust the height every time you change the number of menu items.

2. You write it new (is probably nothig for you because you wont change much). I think there are definitely easier solutions like your posted example. e.g. see HERE

Only the styles are missing and everything works.

I tried to change the height to % too, but that just never worked.
Even add some divs and change some positions nothing happens.
So maybe someone else has a better solution.

using ng-hide animations to create a simple slide-show kind of effect

You are missing ng-animate

http://plnkr.co/edit/AwEToSEnSYiZePF5KhO9?p=preview

you have to add the cdn and inject into app like so

['ui.bootstrap', 'ngAnimate']

Not 100% sure what effect you want with your css, but i'm guessing you will have to tweak a little bit, but this will get the angular animate part working for you.

Slide down animation Angular 4

First, create a file where you would define your animations and export them. Just to make it more clear in your app.component.ts

In the following example, I used a max-height of the div that goes from 0px (when it's hidden), to 500px, but you would change that according to what you need.

This animation uses states (in and out), that will be toggle when we click on the button, which will run the animtion.

animations.ts

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

Then in your app.component, we import the animation and create the method that will toggle the animation state.

app.component.ts

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

And here is how your app.component.html would look like :

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut refers to the animation trigger defined in animations.ts

Here is a StackBlitz example I have created : https://stackblitz.com/edit/angular-muvaqu

Side note : If an error ever occurs and asks you to add BrowserAnimationsModule, just import it in your app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})

---

Related Topics