JQuery.slideUp () and .slideDown () are equivalent in Angular2
Can you please tell me how to create custom animation in Angular2 that is jQuery equivalent . slideUp () and . slideDown () . I know I can use the jQuery plugin to do this, but many people recommend against using it. So I am looking for an alternative method to create these animations. SlideUp and slideDown will make any div collapsible with smooth animation when any button is clicked.
source to share
To create a custom slideUp / Down element for an element, we can do the following:
1) Define two states (open, close) with appropriate styles for height
. You can also add other styles like opacity
or color
.
We use a custom value *
to tell Angular to use the value at runtime. This will include margins and shims.
2) Add a transition to tell Angular how it should transition from one state to another. This will determine how the tweens are calculated. The syntax follows {{total duration}} [{{delay}}] [{{easing function}}]
. Time can be expressed in seconds or milliseconds. For example: .2s, 200ms
. Default reset function when skipped 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";
}
}
source to share
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;
}
Plunger example here
source to share
Below is animation for down and up slides using dynamic height values.
If there is no field and / or filling on the object, you can delete these 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}))
])
])
]
source to share
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>
source to share