Angular 14's "rootItem" animation trigger was created with the following alerts: - The properties listed below are not animatable: overflow

Upon upgrading to Angular 14, I encountered this warning. The properties mentioned are not actually used in my animations.

[Error in console][1]
The animation triggers "rootItem" has been built with the following warnings:
 - The following provided properties are not animatable: overflow
   (more information at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
The animation trigger "panelContent" has been built with the following warnings:
 - The following provided properties are not animatable: overflow
The animation trigger "submenu" has been built with the following warnings:
 - The following provided properties are not animatable: overflow

How can this be resolved?

cssangularanimationangular-animations

Answer №1

Latest Update: Potential solution for erroneous warnings arising from PR 46666

The warnings in question were introduced in PR 45212 to assist with addressing issue 27577.

These notifications are specifically for developers and were implemented to "enhance the development experience by easily identifying animation related issues".

If any non-animatable properties are set during a transition, irrespective of whether they are part of an animate() call or not, a warning will be generated. You may be receiving warnings for unused properties in your animations, but keep in mind that animate() calls without specified properties (only timing provided as argument) will animate the difference between initial and final states, potentially flagging non-animatable properties highlighted by the compiler.

If you are certain that these properties have no relevance to your code and the warnings seem unjustified, consider raising this issue on https://github.com/angular/angular/issues along with an implementation example.

Furthermore, ongoing discussions on issue 46602 might lead to Angular offering a feature for developers to disable warnings on specific style() calls where deemed unnecessary, but this remains to be seen.

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

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

javascriptcsshtmlgoogle-chrome

When the @gridGutterWidth(s) is set to 0px for a flush grid in Bootstrap, the navbar's 'a.brand' breaks onto its

Big shoutout to the amazing StackOverflow community for helping me eradicate countless bugs before they even surfaced. Your crowd sourcing powers are truly magical. I'm in the process of building a website using the Wordpress Roots theme, which is ba ...

htmlcsstwitter-bootstrapgridless

Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

I am trying to create a unique animation where three lines of text appear in succession, then hide, and then reappear in succession. I have successfully split the lines into span tags to make them appear one after the other. However, I am struggling to fin ...

javascriptjquerycssloopsshow-hide

Angular: understanding the intricacies of initializing variables within the *ngFor directive

I'm working with an Angular template that looks like this: <li *ngFor="let item of list | keyvalue" let-rand="random()"> <input type="radio" class="form-check-input" id="radio-{{rand}}" name ...

angularngforangular-template

Screen rotation causes disruptions in SwiftUI animations

I've scoured the depths of the internet, but I can't seem to find any mention of this particular issue. Every time a SwiftUI animation is in progress and the screen orientation changes, the transition animation gets botched. Instead of smoothly ...

iosanimationswiftui

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Request to Create Centered Date Element with Line Borders I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side. Ideal Design I Want to Achieve: My Current Approach a ...

htmlcss

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

javascripthtmlcssangular

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

Can anyone help me solve a design issue I'm facing? I have a div with three floating buttons, but one of the buttons is taller than the others due to more content. I'm looking for a way to ensure that all buttons are the same height as the talle ...

htmlcssflexbox

Achieve perfect alignment both vertically and horizontally within a container-fluid using Bootstrap

As the heading suggests, I'm having trouble centering content inside a column within .container-fluid in Bootstrap 4. Below is the code I'm using, but I can't figure out what's wrong. Can someone please assist me? <link href="htt ...

htmltwitter-bootstrapcssbootstrap-4

Adding some movement to your transition in SwiftUI: incorporating animation

Apple's documentation states that we should be able to directly attach an animation to a transition. For instance: .transition(AnyTransition.slide.animation(.linear)) The method documentation reads as follows: extension AnyTransition { /// Att ...

iosswiftuser-interfaceanimationswiftui

Responsive Bootstrap 4 navigation bar featuring collapsible menu and various elements displayed on the right side

I have been struggling for quite some time to create a mobile menu using Bootstrap 4. My goal is to display the 3 brand names and the toggle button on the same row in the mobile menu. However, when I click the toggle button, the 3 brands end up below the c ...

htmlcsstwitter-bootstrapbootstrap-4

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

As a newcomer to Angular, I recently attempted to create an accordion component but encountered unexpected behavior. Here is the HTML code for my attempt: <div class="faq-item-container"> <h1 class="mt-1 mb-5"><strong>Frequently A ...

htmlcssangulartypescript

Display a pop-up alert following the completion of form validation using JavaScript

I am currently learning JavaScript and working on an enrollment form that requires validating a cellphone number with 11 characters. The issue I'm facing is that every time I hit submit, the page refreshes instead of displaying the validation message. ...

javascriptcssvalidationbootstrap-4popup

trouble retrieving file path with PHP inside an image tag

I have created a form for uploading an image file to a folder using PHP. The upload process is successful and I can locate the uploaded file in the directory. However, when attempting to retrieve the URL of the uploaded image to display it in a specific lo ...

phphtmlcssfile

Handling ASP.net POST requests in Angular2

Here is a method called gotoDispatch: gotoDispatch() { // const headers = new Headers(); headers.append('Content-Type', 'application/json'); var url = 'Users/Cards'; var dto = { 'jsonSearchCards&apo ...

asp.netangular

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

Angular has the capability to rewrite URLs in CSS, providing a unique way

An issue arises in Angular when using a base set and html5mode with SVGs. This causes things like filter: url(#url) to be rewritten as filter: url(/base/#url). https://github.com/angular/angular.js/issues/8934 Disabling html5 mode and removing the base d ...

javascriptcssangularjssvgbase-url

CSS: flexible side panels with stationary center

I am looking for a specific layout that consists of three columns: left, content, and right. The left and right columns will each have an image, with the left column image aligning to the left edge of the browser and the right column image aligning to the ...

layoutcss

Move the files created by ng build in the specified output directory to a different location

I am facing an issue with my Angular project. Whenever I run the ng build command, the build artifacts are generated in the dist folder as we have specified "outDir": "dist" in angular-cli.json. However, I then have to manually copy these files from the di ...

node.jsangularnpmangular-cling-build

Retrieve the API Url within an Angular application built with .Net Core

My current setup includes an API project and an Angular Project within the same .NetCore solution. The Angular Project makes API calls to the API project using a baseurl specified in the Environment.ts and Environment.prod.ts files. However, upon publish ...

javascriptjsonangulartypescriptasp.net-core