Having some trouble implementing an animation in my Angular 17 application.
There are two divs next to each other, with the left one being hidden by *ngIf when a button is clicked. The animation on the left side works fine, but the right div doesn't animate along with it - it only resizes after the animation is complete.
Check out the sample code here:
Any tips on how to get the animation working on both sides?
Appreciate any help in advance.
After researching CSS tutorials, I successfully changed the animation style from translateX to margin-left.
import {
animate,
group,
query,
style,
transition,
trigger,
} from '@angular/animations';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
BrowserAnimationsModule,
provideAnimations,
} from '@angular/platform-browser/animations';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
template: `
<div class="container">
<div class="menu" *ngIf="showMenu" [@slideInOut]="showMenu">Menu</div>
<div class="content">Content<button (click)="toggleMenu()">Teste</button></div>
</div>
`,
animations: [
trigger('slideInOut', [
transition(':enter', [
style({ marginLeft: '-100%' }),
animate('200ms', style({ marginLeft: '0px' })),
]),
transition(':leave', [
animate('200ms', style({ marginLeft: '-100%' })),
]),
]),
],
imports: [CommonModule],
})
export class App {
name = 'Angular';
showMenu = true;
toggleMenu() {
this.showMenu = !this.showMenu;
}
}
bootstrapApplication(App, { providers: [provideAnimations()] });
I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...
I encountered a problem with my code: 'PieArcDatum' is not assignable to parameter of type 'DefaultArcObject.' at this specific line Argument of type return "translate(" + labelArc.centroid(d) + ")";. Could someone please assist me in ...
Hello there, I am currently in the process of creating my own portfolio. I have a brief introduction that I would like to display next to an image of myself, with the image positioned on the right side. I have a div called "container" which contains anoth ...
After incorporating ckeditor into my web page along with the table plugin, I noticed that sometimes the width of tables created in the editor window extends beyond the boundaries of the webpage when displayed. To address this issue, I made some adjustments ...
My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...
I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...
Here is a function I created to determine the width and height of a text: function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` fo ...
I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections. I'm struggling to figure out how to achieve this. I initially thought z-index would work, but ...
After setting both the Nav and Header to fixed, everything seems to start out well. I adjust the Nav margin-top so that it appears below the header, which works fine. However, things take a wrong turn when I try adjusting the div. The div ends up behind th ...
I am in the process of building an Angular application and I have a requirement to implement alerts. These alerts should be displayed in response to POST/PUT/DELETE requests, showing a success message. Previously, I achieved this by creating a class: expo ...
I am currently working on creating a container element with multiple child elements. I would like these elements to be aligned differently, some left-aligned and others right-aligned. This includes scenarios where the child elements themselves are containe ...
In my Angular application, I am using Leaflet to display markers with coordinates retrieved from the backend. However, I noticed that the markers do not maintain their position when zooming in or out. They appear to be in a different location compared to ...
I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...
I need help figuring out how to incorporate user input into the header of a post method I am working with. I understand that some kind of binding is necessary, but I'm struggling to implement it in this case. Currently, I have a variable called postDa ...
Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...
Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...
Every time I run npm install, the installation process goes smoothly until the very end, where this error suddenly pops up: npm ERR! 436 passing (12s) npm ERR! 3 pending npm ERR! 2 failing ... I'm currently working on an Angular App and even af ...
I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...
https://i.sstatic.net/cbmuA.gif Hey there, World! I've been working on a sidenav with tabs that has the perfect transition effect I was looking for. Now, I want to add functionality so that when users click on "Option 1, Option 2 or Option 3", the tab ...
I have searched for solutions online, but nothing seems to work for me. I am facing an issue with my webpage that has multiple sections, and I want to display them one after the other vertically. Here is the code snippet: import React from 'react&ap ...