'How to transition when html added using js

I want to transition this h1 when we click on the button, the html for the h1 is added using js, so it is dynamic, I can't specify the opacity 0 and other before the button click, what is the way to do this?

const wow = document.getElementById('wow');
const test = document.querySelector('.test');

wow.addEventListener('click', () => {
    test.innerHTML = `
  <h1 class="title">
        Hello Test
    </h1>
  `;
})
.title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.165,.84,.44,1) .1s,opacity 1s cubic-bezier(.165,.84,.44,1) .2s;
}
<div class="test"></div>

<button id="wow">
  Click
</button>
javascripthtmlcss


Solution 1:[1]

Add a class to the parent, then create CSS which reveals the child when the parent has the class you created ... e.g. reveal in this case

The setTimeout is needed so that the initial content is added to the DOM pre-transitioned, so that it transitions

const wow = document.getElementById('wow');
const test = document.querySelector('.test');

wow.addEventListener('click', () => {
  test.innerHTML = `<h1 class="title">Hello Test</h1>`;
  setTimeout(() => test.classList.add('reveal'), 0);
})
.title {
  opacity: 0;
  transform: translateY(100vh);
  transition: transform 1s cubic-bezier(.165, .84, .44, 1) .1s, opacity 1s cubic-bezier(.165, .84, .44, 1) .2s;
}

.reveal .title {
  opacity: 1;
  transform: translateY(0);
}
<div class="test"></div>

<button id="wow">
  Click
</button>

I was going to use requestAnimationFrame instead of setTimeout ... but, oddly, that didn't work (has me a little perplexed) ... had to do

requestAnimationFrame(() => requestAnimationFrame() => test.classList.add('reveal')));

I know why that definitely works, I just don't understand why a single RAF doesn't - at least in firefox, probably works fine in those other browsers)

maybe setTimeout always triggers after at least one render cycle, but requestAnimationFrame does not?

Solution 2:[2]

You can put this element in HTML first, but set its opacity to 0, and then animate it by switching CLASS

titleNotShow ==> show

<div class="test">
  <h1 class="titleNotShow">
    Hello Test
  </h1>
   </div>

<button id="wow">
  Click
</button>

const wow = document.getElementById('wow');
const test = document.querySelector('.test');

wow.addEventListener('click', () => {
    test.className = 'show'
})

.titleNotShow {
  opacity: 0;
  transform: translateY(0);
}

.show{
opacity: 1;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.165,.84,.44,1) .1s,opacity 1s cubic-bezier(.165,.84,.44,1) .2s;
}

Solution 3:[3]

After adding the innerHTML, you can use setTimeout to transform the h1, after a delay of 1 millisecond. You can select the element using querySelector.

const wow = document.getElementById('wow');
const test = document.querySelector('.test');

wow.addEventListener('click', () => {
  test.innerHTML = `<h1 class="title">Hello Test</h1>`;
  setTimeout(() => test.querySelector(".title").style.transform = "translateY(100px)", 1)
})
.title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.165, .84, .44, 1) .1s, opacity 1s cubic-bezier(.165, .84, .44, 1) .2s;
}
<div class="test"></div>

<button id="wow">
  Click
</button>

Solution 4:[4]

I would look into jQuery's fadeTo() or animate() functions https://api.jquery.com/fadein/, https://api.jquery.com/animate/

In the example I've put a 1000 duration, you may want to reduce it. You may also want to hide the button, or use the toggle() function to alternate between hide/show https://api.jquery.com/toggle/

$( "#wow" ).click(function() {
  $( ".test" ).animate({
    opacity: 1,
    height: 'show',
    marginTop: 'show',
    marginBottom: 'show',
    paddingTop: 'show',
    paddingBottom: 'show'
  },  
  1000)
});
.test { opacity: 0; display:none}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 class="test">Hello test!</h1>

<button id="wow">
  Click
</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 TechySharnav
Solution 4

Related Questions