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>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?
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;
}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>