CODEWITHSUNDEEP
javascriptcss
NBR
NBR

Reputation: 135

How to add a transition to a modal popup when height increases automatically

I have a modal popup which increases height when content gets loaded automatically. I would like to give a transition effect when it increases or decreases. I tried give various style but neither of them seems 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 very new to giving transition. Modal popup opens on click of button. But content increases automatically for which I would like to give a transition effect. Any help will be appreciated

Upvotes: 0

Views: 532

Answers (1)

D M
D M

Reputation: 7179

If you want a transition, generally you will want to set the new values in a class you add to your element. Here's a quick example.

const target = document.querySelector('#target');
target.onclick = () => target.classList.toggle('modified');
#target {
  height: 100px;
  width: 100px;
  padding: 10px;
  
  /* The initial values */
  background-color: #c0ffee;
    /* color: black; (default) */
    /* transform: scaleX(1) scaleY(1); (default) */
    
  /* This applies when the class is removed */
  transition: 0.5s;
  
  /* This applies when the class is added and
     removed unless you specify a different value
     in the class */
  transform-origin: top left;
}

#target.modified {

  /* The modified values */
  background-color: crimson;
  color: white;
  transform: scaleX(2) scaleY(2);
  
  /* This applies when the class is added */
  transition: 2.5s;
}
<div id="target">Click me</div>

Upvotes: 1

Related Questions