<section id="transition-end-event" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="box" class="box">
Hi there
</div>
</section>
<script src="../../js/components/transition-end-event.js"></script>
<section id="transition-end-event" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="box" class="box">
Hi there
</div>
</section>
<script src="{{ path '/js/components/transition-end-event.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("transition-end-event active");
const button = document.querySelector('#trigger');
const box = document.querySelector('#box');
button.addEventListener('click', function() {
box.classList.toggle('active');
});
box.addEventListener('transitionend', function () {
if (box.classList.contains('active')) {
box.innerHTML = 'Transition ended';
} else {
box.innerHTML = 'Hi hi hi'
}
});
});
})();
#transition-end-event {
.box {
width: 150px;
height: 150px;
position: relative;
left: -200px;
transition: left 1s ease;
&.active {
left: 200px;
}
}
}
No notes defined.