Steps for incorporating a smooth transition effect into a modal popup as its height dynamically increases

I need assistance with adding a transition effect to a modal popup that automatically increases in height when content is loaded. I have tried various styles, but none of them seem to be working.

.tagModal{
    overflow:hidden;
  transition:transform 0.3s ease-out; 
  height:auto;
  transform:scaleY(1); 
  transform-origin:top;
 }
  <div id="taggingModal" role="dialog" tabindex="-1" aria-labelledby="header42" class="slds-modal slds-modal_small">
  <div class="slds-modal__container tagModal">

    <div class="slds-modal__header" style="background-color:rgba(27, 82, 151, 1);padding:3px;border-top-left-radius: 5px; border-top-right-radius: 5px;">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="handleTagManagerclose();" style="margin-top: 24px;width: 45px;margin-right: -3px;">
        <svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#close')}"/>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
      <h3 id="header42" style='color:white;font-size:12px;'>Tags</h3>
    </div>
    <div class="slds-modal__content slds-p-around--xxx-small">
      <div id="globalTaggerId" style="font-size:12px !important;"/>
    </div>
  </div>
</div>

I am new to applying transitions and would appreciate any help on how to achieve this effect in the modal popup that opens on button click. Thank you!

javascriptcss

Answer №1

If you're looking to create a smooth transition effect, it's best practice to define the new styles within a class that you can then apply to your element. Check out this simple example for guidance.

const target = document.querySelector('#target');
target.onclick = () => target.classList.toggle('modified');
#target {
  height: 100px;
  width: 100px;
  padding: 10px;
  
  /* Initial styles */
  background-color: #c0ffee;
    /* color: black; (default) */
    /* transform: scaleX(1) scaleY(1); (default) */
    
  /* Transition effect duration */
  transition: 0.5s;
  
  /* Origin point for transformation */
  transform-origin: top left;
}

#target.modified {

  /* New styles applied when class is added */
  background-color: crimson;
  color: white;
  transform: scaleX(2) scaleY(2);
  
  /* Specific transition time when class is added */
  transition: 2.5s;
}
<div id="target">Click me</div>

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

A way to retrieve the value from a list item when clicked on a menu to facilitate dynamic routing in Vue.js

**I have currently created a separate component for each list item, but I'm looking to make this more dynamic as it's taking too long to load. Unfortunately, I'm unsure of how to go about this.** <nav class="navbar navbar-expand-lg ...

javascripthtmlvue.jsurl-routingvue-router

Determine the size of the file as well as the width and height of the image

Is there a way to retrieve the file size, image height and width prior to uploading them to my website using either jQuery or JavaScript? ...

javascriptjqueryhtmldimensionsimage-size

Deferred computed property fails to recognize the final character entered into the input field

I am facing an issue with my automated tests using selenium. The problem lies with a particular input field in a web form: <input data-bind="value: searchText, valueUpdate: 'afterkeydown'"></input> Here is the model associated with ...

javascriptgoogle-chromeseleniumknockout.js

Is there a way to modify the space bar and enter key functionality exclusively for the third button, rather than applying it to all buttons?

https://jsfiddle.net/ffkwgddL/ In the code, I have three buttons named first-button, second-button, and third-button. If the first-button (introduction) is clicked and then the space bar is pressed, it functions as if the first button was clicked again. H ...

javascriptjqueryhtmlcsstwitter-bootstrap

Assistance required in filling out a table solely through JavaScript with input from an HTML form

Hello, I am currently pursuing a second career and have just started learning HTML & JavaScript. For a simple assignment, I need to take user input in the form of numShares and numYears through HTML. My goal is to use JavaScript to populate a 3-column tabl ...

javascripthtml

What is the most effective way to reduce the spacing between columns in Bootstrap while maintaining consistent spacing on the outer edges?

I have set up my bootstrap columns as shown below: <div class="col-6"> <a href="gallerij/stockfotos/boeken" class="catphotowrap"> <div class="catphotodiv"> <img class=&quo ...

htmlcssbootstrap-4styles

Optimizing NodeJS for scheduling and sending bulk text messages based on MongoDB data

I am currently developing an application that relies on MongoDB database entries to send text messages through AWS. The information stored in the database includes the message content, phone number, and scheduled time for sending the message. As of now, ...

javascriptnode.jsmongodbexpress

How to clear an HTML text input using JQuery

Can someone help me with adjusting the default value of an HTML text input using JQuery event handlers? I want to set it to empty. Here is the input: <button id="setColor">Set Color</button> <input type="text" id="colorText"> This is t ...

javascriptjqueryhtml

Youngster listens for guardian's occurrence in Angular 2

While the Angular documentation covers how to listen for child events from parents, my situation is actually the opposite. In my application, I have an 'admin.component' that serves as the layout view for the admin page, including elements such a ...

javascripttypescriptangularrxjseventemitter

Having issues with InstaFeed (search) feature and jQuery Mobile

As a new developer, I am working on my first JQM site. However, I am facing an issue with my search input form where the instafeed photos do not show up until after a manual page refresh following submission. Despite numerous attempts, I cannot seem to res ...

javascriptjqueryinstagramjquery-mobile

Tips for handling the rejection of a promise within a callback function in Node.js

How can we effectively incorporate a catch statement within a rejectionCallback function of a promise? Is it feasible or advisable to structure the code in this manner? Would the Promise object need to be passed into the rejection function in such a scena ...

javascriptnode.jspromise

What is the process for adding elements to the parent elements that have been selected using getElementsByClassName?

Here is the JSP code snippet I'm working with: <% while(resultSet1.next()){ out.println("<p class='comm'>"); out.println(resultSet1.getString("answer_content")); ...

javascriptjqueryjsp

Convenient Method for Making POST Requests with the Node Request Module and Callback

Does the .post() convenience method in Javascript/Node's request module accept a callback? I'm confused why it would be throwing an error like this: var request = require('request'); request.post({url: 'https://identity.api.foo/v ...

javascriptnode.js

What is the process for utilizing the TypeScript compiler with nodejs?

I have a sample code saved in a file called hello.ts Upon the completion of nodejs setup on Windows, execute the following command to install typescript: npm install -g typescript Is there a way to compile hello.ts directly with node.js? While using "T ...

javascriptnode.jstypescript

Organizing the directory layout for the /profile/username/followers route in NextJs

I want to set up a folder structure for my website that can accommodate the URL /profile/username/followers, where the username will be different for each user. The proposed folder structure is as follows: pages -- profile -- [username].js Curren ...

javascriptreactjsnext.js

What could be causing the input field state to remain static even as I type in the MUI textField?

In my React.js component, I am facing an issue where the textField is not updating when I try to type anything. Upon debugging, I discovered that when the first character is entered, the component re-renders and loses its previous state, causing the textF ...

javascriptreactjsecmascript-6material-uitextinput

Angular displaying a blank screen, even though the complete dataset is available

I am currently working on my first website using Angular and I've encountered a problem. When I click on 'view project', it should return the data specific to that item. The strange thing is, when I log my JavaScript console, I can see all t ...

javascriptjqueryangularjs

Advancing past the stage of developing basic functions in the document.ready() event handler

When I develop a website, I have a personal preference of creating a main JavaScript file with window.load and window.ready functions at the top. I find it easier to refactor any logic into separate functions within these functions for better readability. ...

javascriptjqueryrefactoringdocument-ready

What is the best option: using a Javascript template or exploring another

Just starting out in web development. I want to include the same menu on every page of my new website, but I don't want to manually update it in each file whenever there's a change. Is there an easy template engine for JavaScript or another sol ...

javascripthtmltemplates

Is there a way to attach a mouseover event to a Vue ref element in Javascript?

I want to remove the mouseOver event from the template using $ref and control the mouseOver behavior within javascript. The Components component contains a child component called myStats, which should only be displayed when hovering over Components. I nee ...

javascriptvue.jsdom-eventsref