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

Tips for organizing three flexbox divs in a horizontal row

Within the content div, I have three separate divs that resize when the browser window is adjusted. The blue and red divs should maintain a fixed width The green div should resize to fill any available space on the left I attempted to accomplish this usi ...

htmlcss

Trigger an API request upon expanding a row in a mat-table

How can I trigger an API call to display more information about a selected row in the expansion when using Angular? I found an example at this link, but I'm not sure how to implement it. Any suggestions on how to accomplish this? ...

angularangular-materialmat-table

Creating a striking two-tone border pattern in an HTML document

Looking to create a design with a straight line that features two colors and a slanted line in between. Here is an example of the desired result: https://i.stack.imgur.com/9ys6e.png ...

htmlcss

Creating a dynamic dropdown menu that changes based on the selection from another dropdown menu

I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...

javascriptpythonhtmlcss

Embed a unique custom design sheet within a Facebook iframe

I'm looking to customize the design of my Facebook feed by adding a custom style sheet inside a Facebook iframe. Here's what I have: <iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allo ...

jqueryhtmlcssfacebookiframe

Uncovering the Solution: Digging into a Nested ng-repeat to Access an Array in AngularJS

I am working with a recursive array in JavaScript: [{ type: 'cond', conditionId: 1, conditions: undefined }, { type: 'cond', conditionId: 2, conditions: undefined }, { type: 'group', conditionId: undefined, ...

javascriptarraysangularjsrecursion

Angular UI modal using the powerful features of Bootstrap 4

Everything is working smoothly with Bootstrap 3 modal: https://jsfiddle.net/qLy7gk3f/4/ However, the same cannot be said for Bootstrap 4 modal: https://jsfiddle.net/qLy7gk3f/3/ The code remains unchanged: $scope.click = function() { $uibModal.open({ ...

angularjstwitter-bootstrapangular-uitwitter-bootstrap-4

Left-aligned and centered - Bootstrap

I need help figuring out how to center a list of items on the page, but have them aligned left. I am using bootstrap. I want the text to be in the center of the page but aligned left. <ul class='text-center'> <li class=& ...

htmlcsstwitter-bootstraptext

Wordpress Sub-Menu Being Eclipsed by Banner

After upgrading my Wordpress to version 3.5.1, I noticed a problem on my site where the Submenus are loading but quickly getting hidden behind the Banner. Despite trying various modifications in the CSS file, the issue remains unresolved (and might have wo ...

csswordpressmenu

Save this code snippet to your clipboard using vanilla JavaScript (no jQuery needed)

I am working on an Angular 9 application where I want to implement the functionality of copying the URL to clipboard when clicked. Currently, I have the following code: The issue I am facing is that it only copies the URL on the second attempt and then st ...

javascriptangularjstypescript

Utilize angularjs daterangepicker to refine and sift through data

I am currently utilizing the ng-bs-daterangepicker plugin by ng-bs-daterangepicker and encountering difficulty in filtering when selecting a start date and end date. Below is a snippet of my code: <input type="daterange" ng-model="dates" ranges="range ...

javascriptangularjs

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

javascriptjquerycsstransition

Is there a universal resolver available for the $routeProvider in AngularJs 1.x?

Can a service be globally resolved for all routes in AngularJs? For example, if I need to retrieve configuration from a Web Service for all the routes, is it possible to achieve something similar to the following pseudocode? $routeProvider .when(&apos ...

angularjs

What is the level of efficiency of Ionic when used without AngularJS?

Considering developing a mobile app using ionic with meteor. Can ionic operate effectively without angularjs? How efficient is the combination of ionic without angular? ...

angularjsmeteorionic-framework

Struggling to figure out the ::before border trim issue

As I work on designing a banner for a webpage, I have added a sliced bottom right border using the ::before pseudo class. The code snippet I used includes: &::before { content: ""; position: absolute; bottom: 0; right: 0; ...

csspseudo-element

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

javascripthtmlcssbootstrap-5

Is it possible to continuously stream the latest data from my xammp server directly into my console log without relying on the set Interval function?

Is there a way to have the data automatically reflect updates in the database without relying on the setInterval function? var dataUpdate = setInterval(updateData, 1000); function updateData() { $http.get('URL CALL', { params: { ...

phpangularjs

Positioning of vertical linear gradients in CSS

Check out this live demonstration: http://jsfiddle.net/nnrgu/1/ I then adjusted the background position to 0px -70px and observed the changes here: http://jsfiddle.net/nnrgu/2/ The linear gradient seems to disappear! Am I doing something wrong, or is ...

css

Creating personalized dots in the owl carousel

I have successfully added custom previous and next buttons to my carousel using Owl Carousel, but I am having trouble displaying the navigation dots. Can anyone help me identify where I might have made a mistake? // owl.carousel.css .owl-controls { ...

htmlcssowl-carousel

Adjusting the size of FontAwesome symbols using FitText

I recently started using FitText () to dynamically resize certain titles on my webpage. While I've had success with resizing h1, h2, and other text elements, I've run into an issue when trying to apply it to fontawesome icons. I know that FitText ...

jqueryhtmlcss