Create animated changes in height for a mdDialog as elements are shown or hidden

Utilizing Angular Material, I have implemented tabs within an md-dialog. The dialog smoothly adjusts its height based on the content of the active tab during navigation. However, when utilizing an ng-if directive to toggle visibility of content, there is no smooth animation for the change in dialog height. Is there a method to animate the height transition when showing and hiding elements inside the dialog?

For reference, here is a Codepen showcasing the tabs with a checkbox option to add content:

http://codepen.io/csteur/pen/zvjgRr?editors=101

cssangularjsangular-material

Answer №1

To display and hide the new content, you will need to implement your own animation. It seems that ngIf does not work smoothly with material dialogs, but ngShow is a good alternative:

Check out this example on CodePen

I made some CSS adjustments and modified your HTML code. I noticed that ngAnimate functions differently in material dialogs, so I included a transition in the main class and added two extra classes in the HTML that are not usually used:

CSS Addition:

.animate-show {
  height: 0;
  background: white;
  overflow: hidden;
  transition: all 0.5s;
}

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

.animate-show:not(.ng-hide) {
  height: 60px;
}

HTML Change:

<p ng-show="addText" class="animate-show ng-hide ng-hide-animate">

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

Adapting the colors of various elements throughout the entire webpage

My goal is to incorporate color-switch buttons on my webpage. When these buttons are clicked, I want the existing colors to change to different shades. However, my challenge lies in the fact that these colors are used for various elements such as backgro ...

javascriptjqueryhtmlcsscolors

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: Is there a way to remove ...

javascripthtmlcssanimation

Angular, JavaScript, and PHP are three powerful programming languages that

This file contains HTML code <ul class="list"> <li id="numword" data-score="{{item.score}}" class="" ng-repeat="item in words track by $index"> {{item.word}} {{item.score}} </li> </ul> Here is the visual representa ...

javascriptangularjs

Update CSS using onChange event with an array of values

I'm currently working on an app that allows users to select a color scheme from a dropdown form. The hexidecimal values associated with the selected color scheme successfully populate specific text fields as intended. However, I am facing difficulty i ...

jquerycssarraysappend

The $scope variable does not sync with the express API

I have noticed that the static part of my app is loading fine. Recently, I integrated a service using Express as a simple API. However, when I attempt to set the #scope from my module's controller, it seems like it hasn't loaded at all. I am puzz ...

javascriptangularjsnode.jsexpresssingle-page-application

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

csscss-position

Determining the orientation of an image in JavaScript

Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work bet ...

javascriptjqueryhtmlcssbrowser

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

cssreactjsmaterial-uimaterial-table

Enhancing bar chart presentation with text in d3

Looking to enhance my bar chart by adding text tooltips that appear when hovering over each bar. While I am a beginner with d3, I've been struggling to implement this feature effectively. Despite trying various methods gleaned from online resources, t ...

javascriptangularjsd3.jstooltip

How to Use ng-controller in AngularJS to Submit a Form with PHP

Hey there! I'm diving into AngularJS and PHP for the first time. My current project involves creating a Contact Form using AngularJs and PHP. The form is pretty straightforward, requiring users to input their First Name, Last Name, Email, and Message. ...

phpangularjs

Are there any pre-existing pop-up methods available for AngularJS?

Is there a way to create a simple pop-up window with static text and just one "Ok" button? In Java/Swing, it's possible to achieve this with just one line of code using pre-defined classes. However, when it comes to Angular pop-ups, it seems like the ...

javascripthtmlangularjs

Replace inline formatting with cascading styles

So, I'm currently working with a service provided by DRUPAL that has its own predefined style. I attempted to use CSS with the !important tag to override the existing style, but unfortunately it doesn't seem to be effective. The default style fr ...

htmlcss

ShadowBox not displaying Vimeo videos

I can't figure out why my Vimeo videos are not appearing in a Shadowbox. I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations ...

javascripthtmlcssshadowbox

When viewed on a mobile device, the contact information bar should vertically collapse

Here is the code snippet I am working with: <div class="topbarsection"> <ul> <li class="alignleft"> <a href="#">Office Address</a> </li> <li class="aligncenter"> Office Timings ...

htmlcssmobile

Angular's end-to-end testing capabilities for backend systems

Is it possible to utilize Angular's e2e framework for testing web services and conducting database validations, essentially for backend testing, or is its primary function limited to front end UI testing? ...

angularjsbackend

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

htmlcssplayframework

Tips for adjusting the alignment of numbers in an ordered list to the right

Check out the code snippet below: The list items are correctly aligned to the right, but the numbers are not. How can we adjust the CSS so that the numbers align properly on the right as well? ol { width: 15vw; } <ol style="text-align:right;"> ...

htmlcss

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax

Html elements overlapping due to incorrect positioning

I'm having an issue with my div elements on a web page. Despite them being set up separately, they all end up positioned underneath the first div created (SiteFullControl). Is there any solution to prevent this from happening? <div id="SiteFullCo ...

csshtml

I have a JavaScript code stored as a string that I need to transform into plain JavaScript

If I have a variable in string format, for example suppose there is a JavaScript code inside it: var string="function myFunction(a,b){return a*b;}"; I want to convert this into pure JavaScript code format like so: function myFunction(a, b) { return ...

javascriptc#angularjs