Questions tagged animation

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

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 , , , ,

How to modify CSS variable in an angular animation state

I’m creating a "draggable" component which can be moved on the page and plays an animation when destroyed. I am curently setting the style.transform attribute of the component host to translate3d to change its position on the document: @Component({ selector: ‘app-window’, templateUrl: ‘./window.component.html’, styleUrls: [‘./window.component.scss’], animations: [ trigger(‘WindowAnimation’, [ state(‘void’, style({ opacity: ‘0’, transform: ‘scale(0)’, […]

By Sadiinso
Published
Categorized as angular, animation, css Tagged , ,

Angular: ChangeDetection Interferes with HostBinding

I’m trying to implement an Animate On Scroll library/helper based on this idea Wizdm Genesys I have a service that emits an IntersectionInfo (IsIntersecting, Direction, IsEntering, etc. ) object when an element intersects with the viewport. I subscribe to it and if the element is entering the viewport, I trigger the enter animation. It works […]

how to initialize a svg animation in angular at the moment is displayed on the screen?

I have animations in svg that i need initialize after display in the viewport, if i use de svg in javascript vanilla this work properly, but if i use angular the animation start in the moment of loading de page and not in the moment of showing in the screen. I solved it by creating […]

By Fernando Arbelo
Published
Categorized as angular, animation, svg Tagged , ,

Execute animation when the element enters the viewable area in angular11

I want to trigger an animation when the window scrolls and the element enters the visible area, instead of using click events or buttons to trigger click me , stackblitz address The animation is triggered when the current page loads, how can I make the card to trigger the animation when scrolling to the visible […]

By yedajiang44
Published
Categorized as angular, animation Tagged ,

angular animation stagger with random delay

I am trying to display multiple divs inside an *ngFor loop using a stagger blink animation. To achieve a kind of glitching effect, i’d want the stagger animation delay between each loop to be a random number between 0.5s to 1s trigger(‘stagger’, [ transition(‘* => *’, [ query(‘:enter’, [ style({ opacity: 0 }), stagger((Math.random() * […]

By Kais Ezzine
Published
Categorized as angular, animation, typescript Tagged , ,
1 8

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