Seamless animation with Angular 4

I'm working on creating a dynamic Homepage in Angular 4 with various cards such as stats, charts, etc., all enhanced with animations. One interesting feature I've implemented is the ability to toggle chart cards to expand to full screen by clicking an icon button. The animation code I currently have looks like this:

state('small', style({position: 'relative', width: '50%'})),
state('large', style({
    transform: 'translateY(-150px)',
    position: 'absolute',
    width: '100%'
})),
transition('small => large', animate('600ms ease', keyframes([
    style({position: 'absolute', width: '100%', offset: 0}),
    style({transform: 'translateY(-150px)',  offset: 1.0}),
]))),
transition('large => small', animate('600ms ease', keyframes([
    style({transform: 'translateY(-150px)',  offset: 0}),
    style({width: '50%', right: 0, offset: 1.0}),
])))

However, this implementation doesn't behave as expected. The width animation is missing during the first step (small => lage), and the translate effect is absent during the reverse animation. I've been trying different approaches for days to achieve a smoother transition without success.

You can check out a quick plunkr demo I created to showcase what I've attempted so far (please don't judge my initial attempts x).

Any help or suggestions would be greatly appreciated! Thanks!

Answer №1

To achieve the desired animation effects, consider utilizing ease-in-out transitions instead of keyframes. Update your plunkr with modifications to the states and graphAnimation trigger:

animations: [
        trigger('panelAnimation', [
            state('in', style({transform: 'translateX(0)'})),
            transition('void => *', animate('600ms ease-in', keyframes([
                style({opacity: 0, offset: 0}),
                style({opacity: 1, offset: 1.0})
            ])))
        ]),
        trigger('graphAnimation', [
            state('small', style({
              position: 'absolute', 
              right: 0, 
              width: '50%'
              transform: 'translateY(0px)'
            })),
            state('large', style({
                transform: 'translateY(-150px)',
                position: 'absolute',
                right: 0,
                width: '100%'
            })),
            transition('small => large', animate('600ms 0.2ms ease-in-out')),
            transition('large => small', animate('600ms 0.2ms ease-in-out'))


        ])
    ]

This adjustment should produce the desired visual impact. Alternatively, explore using groups for independent control over animation timings.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble getting my jQuery to connect with my HTML, no matter what I do

UPDATE: Thank you everyone, I finally figured out that it was the API causing the issue. Even though I downloaded the files to avoid server requests, I will switch to using https instead. I have a couple of questions. Why isn't my code functionin ...

Is SASS stylesheet supported by the Angular 2 Ahead-of-Time compiler?

Considering giving Angular 2 Ahead-of-Time compilation another shot. I'll have to do some significant refactoring since my current custom build process will need to be reworked. Prior to diving in, I'm curious: if I reference external .scss fil ...

Nested navigation in Bootstrap

I am currently working on creating a multilevel menu using Twitter Bootstrap. Check out the code here Below is the snippet of HTML code: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ...

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...

Present information in a tabular format upon identifying an individual's ID using Angular

I encountered a specific issue recently. I successfully connected an API to my database using Angular, and it functions well by displaying all the data in a table. However, when I try to retrieve data for a single ID, the result can only be seen in an inpu ...

Transforming an array of HTTP Observables into an Observable that can be piped asynchronously

I am attempting to execute a series of XHR GET requests based on the results of an initial request. I have an array of observables representing the secondary requests I wish to make, and I am able to utilize Array.map for iterating over them and subscribin ...

Playwright script encounters module not found error

I am currently facing an issue with implementing Playwright in my project. It seems that Playwright is struggling to a) resolve path aliases and b) it is unable to locate certain npm packages that have been installed. Here is the structure of my project: ...

Encountering issues passing the --aot and --prod flags to the ng build command

I'm having trouble passing flags to ng build. Here is the line of code I have: "build:aot:prod": "node --max_old_space_size=8092 ./node_modules/@angular/cli/bin/ng build --aot --prod" However, it seems to only run ng build without the flags. What co ...

Aligning an image in a way that adjusts to different screen sizes

Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...

Exploring the object tag box model and its properties for width and padding in Firefox version 6

Hey there, I've been puzzled by the fact that my Firefox browser seems to be using a different box model for my video embeds compared to Chrome. Even though the same CSS rules are being applied, if the object tag includes attributes like data="whateve ...

Issue with Angular 4: NgModel not functioning properly for setting value to "date" input field

I am facing an issue while trying to set a value to an Input of type "date" in Angular 4. The structure of my field looks like this: <input type="date" class="form-control" ([ngModel])="edt_object.list_changedate" ...

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflowhttps://i.sstatic.net/dhllv.png I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb ...

Adding a unique styling to a div with a custom css class

I am experiencing an issue with my CSS file (approval.css) that is defined as a resource and applied to my XPage. Within the css, there is a specific line of code: .appNavBackground {background-color:#ffffd6 ;} When I try to apply this styleClass to a di ...

Angular: Connecting template data to different visual presentations

Looking for a solution to display data and map values to another presentation without needing complex ngIf statements or creating multiple components. Check out this sample: https://stackblitz.com/edit/angular-9l1vff The 'vals' variable contain ...

Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...

Using custom Components to accept HTML input

I have recently developed a custom component to arrange content within IonCardContent. It has been effective for my current requirements: interface ContainerProps { position?: string; content?: string, colour?: string; custClass?: string; } ...

Using media queries within specific CSS classes

I am attempting to create the following CSS code: .myClass { @media all (max-width: 1024px) { left: 33%; } @media all (min-width:1025px) { left: 25%; } } Unfortunately, it doesn't seem to be working as expected. Is t ...

Is ngForIn a valid directive in Angular 4?

While attempting to loop over the properties of an object using *ngFor with in, I encountered a challenge. Here is a sample code snippet: @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in o ...

Scrolling the inner container in a CSS flexbox layout: tips and tricks

I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below. https://i.stack.imgur.com/nBl6N.png The layout should consist of 3 rows within the viewport with the following structure: - top: " ...

Fluid background images frame the header on either side, with a void of background in the center

I am in need of a header that spans the entire width and is divided into 3 columns, with background images only in the 1st and 3rd columns. Cross-browser compatibility is crucial for this solution. The first column should have a background image and be ...