Questions tagged animation

Explore the latest questions and answers asked by our top developers.

Angular stagger animation for li not working

I am new to angular and I am trying to put some animation effect in menu list items in mobile view using staggered animation. I want the menu links to slide in whenever hamburger menu is clicked. Will be grateful if anyone could show me where I am doing the mistakes in my codes below: […]

By Dhiraj Baruah
Published
Categorized as angular, animation, javascript Tagged , ,

Angular Animation: animate only added item in ngFor list

I have a list of array items in an ngFor. I have a simple button the adds an an item to the array. I want to apply an animation to the items when they are added only but although this works, the group of list items already on the page gets the animation on page […]

By Steve
Published
Categorized as angular, animation, javascript Tagged , ,

Set height of a Div by Offset was jerky/lagging

in my web app I try to set a height of a div on scroll event to make UI effect and parallax, when I scroll over the top, the Div gets bigger, and when I scroll to bottom page the Div gets smaller for a parallax effect. I use @HostListener(‘window:scroll’, [‘$event’]) for trigger the scroll, […]

By nmat
Published
Categorized as angular, animation, javascript, offset, scroll Tagged , , , ,

How to animate responsive div in Angular?

I have following animation: @Component({ … animations: [ trigger(‘fade’, [ transition(‘:enter’, [ style({‘width’: ‘0’ }), animate(300, style({‘width’: ‘?’})) // responsive width here what can I do? ]), transition(‘:leave’, [ animate(200, style({‘width’: ‘0px’})) ]) ]) ] }) and the html code: <div class="detail" *ngIf="hasPost" [@fade]> <app-post-detail></app-post-detail> </div> So, I generally wonder how to setup animations when […]

By Opat
Published
Categorized as angular, animation, css, javascript, typescript Tagged , , , ,

Why is my :leave-Animation not working although the :enter-animation works?

In my home.component.html: If I click on the icon, the function activateProfileSidebar sets the boolean showProfileSidebar to true. <i class="fas fa-user-circle user-icon" *ngIf="user" (click)="activateProfileSidebar()"> {{user.username}} </i> <app-profile-navbar *ngIf="showProfileSidebar"></app-profile-navbar> and home.component.ts ngOnInit(): void { this.sharedSrv.getShowProfileSidebar().subscribe(value => this.showProfileSidebar = value); } activateProfileSidebar(){ this.sharedSrv.setShowProfileSidebar(true); } The :enter-Animation works fine and in my profile-navbar.component.html, you can close the profile-sidebar. […]

Angular Animation not working with Input-Output Child component

I checked the Angular documentation and some tutorials but have not resolved my problem. I have a child component accordeon used in many others. In accordeon, it receives a boolean value from the component using it, to know when it must be opened or closed. Accordeon is also divided between two ng-content, one getting the […]

how to animate when string interpolation value is changed

I have one parent component and child component. I pass value to child component from parent component using @Input(). Now when value will changed from parent , child component will get changed value. My question is when Input() changed , How to animation those value. parent-component <div> <child [totalPrice] = "price" /> </div> child-component <div> […]

By GaurangDhorda
Published
Categorized as angular, animation, javascript, typescript Tagged , , ,

Angular elastic enter height animation

I’m new to Angular Animations and am needing to implement the below animation on a list and its items. My desired outcome of the animation is as follows: I’ve read the documentation and the closest I’ve been able to piece together is the following: export const items = trigger(‘items’, [ transition(‘:enter’, [ style({ ‘max-height’: ‘1px’ […]

Is there a known way to include Webfow JS animations in Angular?

We are currently using Angular 8 with Webflow to create our frontend design. Webflow exports the code as HTML and CSS files which are easy to implement. Animations are exported in a Webflow.js file containing lots of unreadable code. The basic question is: How can we make use of these animations in Angular? We tried […]

Is it possible to use a single Angular animation in all components globally?

I have tried the stagger animation example from Angular docs: https://angular.io/api/animations/stagger I managed to make it work, although I had to add { optional: true } parameter to the queries. I was wondering if it is possible to write this animation trigger once (i.e. in app.component.ts) and use it in any child components. My end […]

By tahaerden
Published
Categorized as angular, animation, components Tagged , ,
1 6 7 8 9 10

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq