Questions tagged animation

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

Angular browseranimation slideup from bottom

I am trying to create simple animation. Good is that it works but in reverse direction as I want. What I want to do is to open div from bottom to top. And close div from top to bottom. And this is my animation in angular animations: [ trigger(‘inOutAnimation’, [ transition(‘:enter’, [ style({ height: 0, […]

By Michaelo
Published
Categorized as angular, animation, css, css-animations, types Tagged , , , ,

AOS just work with first element (Angular)

Animation for few elements works fine, but not for all. I tried and inspect issue in browsers developer tool and found that "aos-animate" class does not get applied to those elements. Any Guess why it is happening? More inputs I have ngOnInit(){AOS.init();} in app.coponent.ts Entire markup is valid and no closing or opening brackets are […]

By Mounaim
Published
Categorized as angular, animation, aos.js, scroll Tagged , , ,

angular animation: component is killed before trigger animation

I am trying to trigger an animation from the popin.component.ts that manage the view. import { Component, EventEmitter, Input, Output } from "@angular/core"; import { trigger, state, style, animate, transition } from "@angular/animations"; @Component({ selector: "app-popin", templateUrl: "./popin.component.html", styleUrls: ["./popin.component.css"], animations: [ trigger("openClose", [ state( "open", style({ transform: "translateY(0%)" }) ), state( "closed", style({ transform: […]

By Younes
Published
Categorized as angular, animation Tagged ,

Any library similar to react-flip-move but for angular?

Is there any library similar to https://www.npmjs.com/package/react-flip-move but for Angular? I have done my googling but I don’t seem to find one. Thanks! Source: Angular Questions

By Carlos Dub n
Published
Categorized as angular, animation, reactjs Tagged , ,

How to switch animation from Angular to css

I have a fade-in/out animation working perfectly using @angular/animation, but I need to pass this animation to css and take this dependence off of @angular/animation My animation (I just pass the [@fadeInOut] attribute in my div and it works): animations: [ trigger(‘fadeInOut’, [ state( ‘void’, style({ opacity: 0 }) ), transition(‘void <=> *’, animate(300)) ]) […]

By ramos97
Published
Categorized as angular, animation, css, css-animations Tagged , , ,

How can I make Angular component animations follow CSS class changes, rather than static styles?

I’ve created a block-cursor date/time input field that uses Angular states and animations to indicate both ongoing states (like being disabled) or animated transitional states (like a red flash when an invalid keystroke has been entered). These input fields can be seen in use here: https://skyviewcafe.com/ export const BACKGROUND_ANIMATIONS = trigger(‘displayState’, [ state(‘error’, style({ backgroundColor: […]

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

How to disable click event after element’s drag and drop in angular?

Actually I bind animation states on the element on which I applied CDKdrag and drop. It automatically triggers animation state when an element is dropped. How to disable animation on drop? How to differentiate animation click event and drop element event codes—– typescript: //animation trigger("changebarChartSize",[ state("ZoomBarChart", style({ transform: "scaleX(1.7) scaleY(1.3) translate(335px,60px)", border: "2px solid grey", […]

How can i program my angular animation with dynamic values?

I have a page transition animation in angular between the home and the models page. Both page have a button, button my-button-start-page on the home page, my-button-end-page on the models page. I would like to move the my-button-start-page to the my-button-end-page’s location during the transition. Is it even possible like how i tried in the […]

By Bezonce
Published
Categorized as angular, animation, transition Tagged , ,

How to use the animation trigger from separate .ts file in Angular?

There is an example of exporting an animation trigger in Angular: import { animation, style, animate, trigger, transition, useAnimation } from ‘@angular/animations’; export const triggerAnimation = trigger(‘openClose’, [ transition(‘open => closed’, [ useAnimation(transitionAnimation, { params: { height: 0, opacity: 1, backgroundColor: ‘red’, time: ‘1s’ } }) ]) ]); But I can’t figure out how do […]

By mr blond
Published
Categorized as angular, animation, css, html, javascript Tagged , , , ,

Preview the picture below the picture on mouse over but only in small circle like a magnifying glass [duplicate]

I have pictures of the device on technical drawing and I want to see this drawing below only in small circle. I dont know how to settle ten effect. Something like this: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp but I do not want to enlarge but to show the part of the picture which is under this picture. Im using […]

By Xia
Published
Categorized as angular, animation, css, html, image Tagged , , , ,
1 2 3 4 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