CODEWITHSUNDEEP
javascriptangularanimation
heman123
heman123

Reputation: 3003

jQuery .slideUp() and .slideDown() equivalent in Angular2

Can you please guide me on how to create a custom animation in Angular2 equivalent to jQuery .slideUp() and .slideDown(). I know I can use jQuery plugin for this, but many folks recommend not to use it. So I'm looking for an alternate method to create these animations. The slideUp and slideDown will make any div collapsible with smooth animation on click of some button.

Upvotes: 3

Views: 4284

Answers (4)

Sudhir Mann
Sudhir Mann

Reputation: 61

Below is the animation for slide down and up using dynamic height values.

If there is no margin and/or padding on the object, you can remove those settings.

animations: [
  trigger('slideUpDown', [
    transition('void => *', [
      style({height: 0, margin: 0, padding: 0, opacity: 0}),
      animate(500, style({height: '*', margin: '*', padding: '*', opacity: 1}))
    ]),
    transition('* => void', [
      style({height: '*', margin: '*', padding: '*', opacity: 1}),
      animate(500, style({height: 0, margin: 0, padding: 0, opacity: 0}))
    ])
  ])
]

Upvotes: 1

BogdanC
BogdanC

Reputation: 2784

Pure CSS approach:

html

<button (click)="toggleSlide=!toggleSlide">Toggle</button>
<div class="slider closed" [ngClass]="{'closed':!toggleSlide}">
  <div class="content"></div>
</div>

css

.slider {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(1,0,1,0);
}

.slider.closed {
  max-height: 0;
  transition: max-height 0.7s cubic-bezier(0,1,0,1);
}

.content{
  height: 200px;
  width: 200px;
  background-color: blue;
}

Plunker example here

Upvotes: 0

Gerard Sans
Gerard Sans

Reputation: 2279

In order to create a custom slideUp/Down for an element we can do the following:

1) Define two states (open, close) with according styles for height. You could also add other styles like opacity or color.

We use the special value * to tell Angular to use the value during execution. This will include margins and paddings.

2) Add a transition to tell Angular how it should go from one state to the other. This will define how intermediate values (tweens) will be calculated. Syntax follows {{total duration}} [{{delay}}] [{{easing function}}]. Time can be expressed in seconds or milliseconds. Eg: .2s, 200ms. Default easing function when omitted is ease.

See below:

@Component({
  selector: 'my-app',
  template: `
    <h1>App</h1>
    <button (click)="toggle()">Toggle</button>
    <div class="card" [@toggle]="state">
      Click to slideUp/Down
    </div>
  `,
  animations: [
    trigger('toggle', [
      state('open', style({ height: '200px' })),
      state('closed', style({ height: '*' })),
      transition('open <=> closed', animate('200ms ease-in-out'))
    ])
  ],
})
export class App {
  state = "open";
  toggle() {
    this.state = (this.state=="open")? "closed": "open";
  }
}

Plunker

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use Element.animate()

div > div {
  width: 300px;
  height: 200px;
  display: block;
  background: blue;
}
<div>
click
<div></div>
</div>
<script>
  const div = document.querySelector("div");
  const props = ["200px", "0px"]; // from, to
  div.onclick = () => {
    div.firstElementChild.animate({
      height: props
    }, {
      duration: 1000,
      easing: "ease-in-out",
      iterations: 1,
      fill:"forwards"
    })
    .onfinish = function() {
      props.reverse()
    }
  }
</script>

Upvotes: -1

Related Questions