What is causing the size increase animation to not work properly with ngShow in AngularJS?

I'm looking to animate the height of a dropdown menu using max-height. It's mostly working, but when it expands, the transition is not smooth. However, when I shrink it back down, the transition works fine.

You can check out the demo for the HTML and CSS (LESS) code I'm using. The animations are not functioning there, even though the code is the same as what you see in the GIF below.

https://i.sstatic.net/4MJ5I.gif

The height of the menu depends on its contents, which can vary between 1, 2, or 3 items, each defined with different classes.

Below is the CSS code snippet:

.content-management-dropdown {
  // CSS properties here
}

For more guidance on animations, I referred to this tutorial video.

Any assistance with this issue would be greatly appreciated.

cssangularjslesscss-animations

Answer №1

After some troubleshooting, I finally managed to solve the issue. I made adjustments to the CSS and found that the secondary menu was the one controlling the heights. However, there was a problem with the heights due to one of them being overwritten with a smaller value.

Below is the updated CSS for the menus:

.menu-primary {
    width: 100%;

    &.ng-hide-remove {
      position: absolute;
      transform: translateX(-110%);
    }

    &.ng-hide-remove-active {
      transform: translateX(0%);
      transition: all 500ms ease;
    }

    &.ng-hide-add {
      position: absolute;
    }

    &.ng-hide-add-active {
      transform: translateX(-110%);
      transition: all 500ms ease;
    }
  }

  .menu-secondary {

    &.ng-hide-remove {
      transform: translateX(110%);
      max-height: 3.7rem;

      &.menu-2-item {
        max-height: calc(3.7rem * 2);
      }

      &.menu-3-item {
        max-height: calc(3.7rem * 3);
      }
    }

    &.ng-hide-remove-active {
      transform: translateX(0%);
      transition: all 500ms ease;
      max-height: 27rem !important;
    }

    &.ng-hide-add {
      max-height: 27rem;
    }

    &.ng-hide-add-active {
      transform: translateX(110%);
      transition: all 500ms ease;

      max-height: 3.7rem;

      &.menu-2-item {
        max-height: calc(3.7rem * 2);
      }

      &.menu-3-item {
        max-height: calc(3.7rem * 3);
      }
    }

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

Creating a series of menu image buttons with rollover effects using HTML and CSS

I am facing an issue with my navigation bar. I have 5 horizontally aligned .png buttons that I want to add rollover effects to using CSS, not Java. After trying multiple solutions, I still can't seem to get it right. None of the methods I attempted w ...

htmlcss

Angular Overlay Chrome Extension

I've been developing a chrome extension that shows an overlay on any tabs the user has open. It's essential for the overlay to cover the entire viewport. Using vanilla Javascript and content script, I inject a full viewport-size div (into the bo ...

angularjsgoogle-chromegoogle-chrome-extensionangular-material

Place a JavaScript code block within a designated div container

I'm currently working on revamping the appearance of the header area for this website. My goal is to replace the background image with a rectangular JavaScript ad positioned to the right of the logo. However, I've encountered difficulty due to th ...

htmlcsslayout

An issue is being caused by altering the custom.scss.css file in Rails

After following the tutorial by Michael Hartl (), I encountered an issue when trying to modify some CSS functions in the custom.scss.css stylesheet. Every time I make a change, such as adjusting the margin from 10 px to 11 px, I receive this error in my br ...

cssruby-on-railstwitter-bootstrap

Animating jQuery Accordion in Horizontal Direction Extending to the Far Right

After implementing a horizontal accordion in jQuery based on the tutorial found at the following link: A minor issue arose during animation where a slight space was added on the far right side, causing the tabs to shift slightly. This problem is particula ...

javascriptjquerycssjquery-ui

What steps are involved in customizing the footer section of a

I'm trying to track down a piece of html that seems to be triggering random black boxes appearing on my website pages. It looks like there might be a duplicated footer section, and <footer></footer> could be the culprit. I'm not sure ...

htmlcsswordpress

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

I am currently exploring the video capabilities of HTML5. Using a directive userMedia, I have successfully activated my camera on my MacBook through navigator.getUserMedia() (using an adapter for cross-browser compatibility with supported browsers). Howev ...

javascripthtmlvideocameraangularjs

Utilizing grid for JavaScript positioning on the website:

Hey there! I have a bunch of javascript files that I want to incorporate into my site using CSS grid. I have the code ready, but I'm a bit confused: Where exactly should I add the columns and rows in the .box-1 class to change its position? Addition ...

javascriptcsscss-grid

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

A centered layout design with a background that extends beyond the element

I am facing a challenging problem with a relatively simple layout. To summarize My layout is centered The sidebar background should extend all the way to the left The section background should extend all the way to the right The backgrounds are purely v ...

htmlcss

Looking for guidance on transitioning to Angular 2 - any tips?

Providing some context: I am involved in the development of a massive, highly dynamic, and customizable Angular 1 web application. Due to its size and dynamism, there are an excessive number of watchers - at least 4K in a single view. Naturally, the app ...

angularjsangular

Display a nested ng-repeat div based on certain conditions in Angular

<div class="sunti_display" ng-repeat="sunti in suntis track by $index"> <div class="individual_sunti" ng-click="update_ancestor(sunti)"> <!--requires a unique div#id using angular--> <div cla ...

angularjsconditional-statementsangularjs-ng-repeat

Conceal the div element when located beneath an ordered list with a designated

I need help hiding the display of comment information if it is a child comment. Below is my attempt to hide the div with the id "info" if the "ol" element has a class of "children". If you have another method for hiding the div when the comment is a chil ...

javascriptjqueryhtmlcsswordpress

Guide on dynamically displaying a keyboard in an Android mobile application when an input field is present, utilizing jQuery

When accessing the input field in my application on Android mobile devices, I need the keyboard to appear dynamically. I attempted to achieve this using jQuery by using the code $('#appear').focus(); Although the focus is being set on the input ...

jqueryhtmlcss

Tips for waiting for DOM to finish loading in protractor tests

When I use "browser.get(url)" to load a URL in the browser, I expect something to appear on the screen. However, my test cases are failing because the page takes some time to load and the tests run before it is fully loaded. Is there a way to wait for the ...

angularjsprotractor

The collection of items in my Products array isn't displaying as expected within the Angular framework when utilizing the

I recently completed a basic Angular app that utilizes models, inputs, and outputs. However, when I try to run the app, nothing appears on the page. Upon inspecting the Chrome dev tools, I noticed that the "products-list" component is empty in the DOM tr ...

javascripthtmlcssangularcomponents

Interactive Radial Menu Using Raphael JS

Greetings and thank you for taking the time to consider my predicament. I am currently working on creating an SVG menu using raphael, but unfortunately, geometry has never been my strong suit. Below is a visual representation of what I have managed to cre ...

jqueryhtmlcssnavigationraphael

Having trouble implementing table row selection with semantic-ui table

I am currently in the process of adopting Semantic-UI, but I am encountering some issues. Specifically, I am struggling to make row selection work in a table. Below is the sample HTML I am using from Semantic-UI: <table class="ui selectable celled tab ...

javascripthtmlcsssemantic-ui

Adjusting div position because of navigation bar elements above

I have implemented Bootstrap to create navigation tabs on my website. Currently, I have two navigation bars within a single div element. While they are functioning correctly, I am facing an issue where toggling through the tabs changes the height of the co ...

javascripthtmlcsstwitter-bootstrap

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

I am experimenting with rendering a list of <el-card> items using a transition-group. Each card has a front and back side that flip when a button is clicked. To achieve a smooth flip transition, I need to apply the style: position: absolute; top: 0; ...

cssvue.jselement-ui