How can you avoid an abrupt transition when using `ng-hide` for animations?

I've been working on an accordion animation using ng-hide based on the panels height. However, I've noticed a slight jump when the ng-hide is applied. (click on the first title to show and hide)

Can anyone offer assistance in resolving this issue?

Below is the CSS code I am currently using:

.animate-show{
  border:2px solid gray;
  padding: 10px;
  background:green;
}

.animate-show.ng-hide {
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  padding: 0;
  height:0;

}

Live Demo

cssangularjs

Answer №1

To ensure a seamless transition between the green content div and the following toggling div in the .animate-show.ng-hide class, it is necessary to eliminate the margin. This can be achieved by applying a negative margin-bottom style to the said class:

h1{
  background:gray;
  cursor:pointer;
}

.animate-show{
  border:2px solid gray;
  padding: 10px;
  background:green;
  overflow:hidden;
}

.animate-show.ng-hide-add{
  transition: all linear 0.5s;
}

.animate-show.ng-hide-remove
{
  transition: all linear 0.5s;
}


.animate-show.ng-hide {
  line-height: 0;
  padding: 0;
  height:0;
  margin-bottom:-21px;
}

For further reference, please visit the Plunker link: http://plnkr.co/edit/XQ4p8uE47QxQbDKUiIyi?p=preview

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

Ways to decrease font size and insert a line break within a constrained input space?

I am facing an issue where the input box remains static with old numbers when it overflows, and newly typed numbers do not appear at all. <!DOCTYPE html> <html> <body> <input type="text" id="output-area" placehold ...

javascripthtmlcss

While using Nav, it is necessary to adjust the height of the drop-down menu to accommodate the content when the sub-menu

My dropdown menu has multiple submenus, and I'm facing an issue where the submenu content overlaps the container when opened. I want the container to scale to the height of the submenu content when opening, and then reduce back when closing the submen ...

htmlcssdropdownbootstrap-5nav

Filtering data in Angular based on specific dates

Upon receiving data from an Angular service, I have a JSON object structured like this: [ { "id": 2, "order_status": "R", "order_date": "2015-09-12T07:58:24.733834Z", "update_timestamp": "2015-10-05T04:22:44.904227Z" ...

javascriptjsonangularjs

Definitions that are displayed dynamically when hovering over a particular element

I am seeking a way to implement popup definitions that appear when a div is hovered over. My website showcases detailed camera specifications, and I want users to see a brief definition when they hover over the megapixel class called '.mp'. One o ...

javascriptjqueryhtmlcsshover

"Creating a dynamic Map using the HERE Maps API and adjusting its size: A step-by-step guide

I am currently working on a Website project and I am interested in incorporating an interactive map from HERE Maps that spans the entire screen under my navigation bar. How can I achieve this? After initially using Google Maps, I switched to HERE Maps due ...

javascriptcssapiresizemaps

Arranging fixed-width <div>s in rows of four for a sequential display

Below is the code that I am working with: <div style="margin: 0 auto; display:block; width: 916px; overflow: auto;"> <?php echo ""; echo "<i>Owned: $line->phone </i><br><br>"; $query ...

phpcsssql

Animation of disappearing blocks covering the entire screen

I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffecti ...

javascripthtmlcssanimation

Parsing a Jackson object in JavaScript that includes JsonIdentityInfo

Hey there (excuse my English) I've been working on an AngularJS front-end website that consumes a web service which produces JSON with Spring MVC. The Spring MVC uses the JsonIdentityInfo option for serialization, so each object is only written once ...

javascriptjsonspringangularjsjsonidentityinfo

Checking for offline status in a Cordova app using Angular

I have implemented the following code to determine whether my Cordova application is online or offline. var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown'; states[Connection.ETHERNET] = ' ...

javascriptangularjscordova

Adjust the element colors within a Vue loop with dynamic changes

Hey there! I'm currently working on achieving a unique design inspiration that involves colorful badges grouped together. Here's a visual reference: https://i.sstatic.net/5LDBh.png In the image, you can see these badges grouped in pairs, but the ...

cssvue.jsnuxt.jsvuex

The functionality of aria-expanded is not functioning properly when set to false

Having trouble with the bootstrap accordion feature. When the page loads, the accordions are expanded by default instead of being collapsed. I want them to start collapsed and then expand when clicked. Here is the HTML code: <!DOCTYPE html> &l ...

jqueryhtmlcsstwitter-bootstrapweb-deployment

How can Angular.js directives help display various nested data structures?

Is there an Angular.js directive available for displaying nested JSON data dynamically as a view without prior knowledge of the structure? Let's say we have the following JSON resource at a REST endpoint /api/orgranisations/:organisation_id/: { ...

angularjs

Authentication with AngularJS and Java, managing $scope

My current system setup includes: front-end = AngularJS back-end = Java EE7/REST-API Both applications are operating on Wildfly 8.2 using Undertow as the application server. One of my main concerns is about the authentication process: Should I impl ...

javaangularjsrestauthenticationwildfly

Struggling to align elements in a navbar using HTML and CSS?

Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facin ...

htmlcss

Changing the line spacing of label elements in HTML forms

I am encountering an issue with my form where the spacing between the two lines of the <label> element is too large and I am unable to adjust the line-height. For reference, I have applied the same CSS styles to a <label> and a <p>. Surp ...

htmllabelformscss

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

cssangularjsionic-framework

Angular not executing Jquery script in included HTML files

Underneath is a simple jquery code snippet: $(document).ready(function() { $("h2").click(function(){ alert("Hello world"); }) }); After clicking on any h2 tag in the website, an alert message will display. The code functions properl ...

jqueryhtmlangularjs

Internet Explorer displaying incorrect formatting for HTML CSS tables

Having an issue with table display on IE 9/10/11. Tested code on different browsers and platforms, everything looks good except when viewed on my HTTP server (lighttpd and python SimpleHTTPServer), the table is showing up incorrectly: var cell = $(&apos ...

javascripthtmlcssinternet-explorer

uncertainty when implementing ng-if / ng-show / ng-hide

I am facing an issue with exporting content to PDF from my HTML. When a user clicks on the export button, the PDF is downloaded, but there are certain divs whose content I do not want to be exported or shown in the PDF. However, I still want them to be vis ...

javascripthtmlangularjsangularjs-ng-if

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

javascriptjquerycss