Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fading in an element
<a href="#" id="tester">Test</a>
<div id="note-main">
<!-- <div id="note" class="note">
Hello, world
</div>
-->
</div>
tester = document.getElementById('tester');
//note.classList.remove('slide-in');
const setParent = function(el, newParent)
{
newParent.appendChild(el);
}
const afterNoteShown = function(e) {
const target = document.getElementById('note-main');
console.log('transition done');
e.currentTarget.classList.remove('slide-in');
e.currentTarget.style.position = 'static';
setParent(e.currentTarget, target);
};
tester.addEventListener('click', e => {
const msg = `lookout momma, there's a white boat coming up the river`;
const html = `<div id="note2" class="note">${msg + msg}</div>`;
const container = document.getElementById('note-main');
container.insertAdjacentHTML('afterbegin', html);
const note = document.getElementById('note2');
note.addEventListener('transitionend', afterNoteShown);
window.setTimeout(()=>{
note.classList.add('slide-in');
}, 120);
//note.style.right = '20px';
})
.note {
position: absolute;
top: 20px;
right: -800px;
max-width: 500px;
min-height: 25px;
padding: 1rem;
overflow: hidden;
background-color: rebeccapurple;
opacity: 1;
transition: right 2000ms ease-out;
}
.slide-in {
right: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.