<section id="transition-end-event-trigger-something-else" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="triggerOne" class="box transition-trigger-box-one">
To the left!
</div>
<div id="triggerTwo" class="box transition-trigger-box-two">
To the right!
</div>
</section>
<script src="../../js/components/transition-end-event-trigger-something-else.js"></script>
<section id="transition-end-event-trigger-something-else" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="triggerOne" class="box transition-trigger-box-one">
To the left!
</div>
<div id="triggerTwo" class="box transition-trigger-box-two">
To the right!
</div>
</section>
<script src="{{ path '/js/components/transition-end-event-trigger-something-else.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("transition-end-event-trigger-something-else active");
const button = document.querySelector('#trigger');
const boxOne = document.querySelector('#triggerOne');
const boxTwo = document.querySelector('#triggerTwo');
// Just adding the active class to the first box to start the reaction
button.addEventListener('click', function () {
boxOne.classList.add('active');
})
// Note that the transitionend event fires on everything that transitions;
// so if you have two things transition, this will jam up pretty quick.
// Though I guess you could check the event object to see what transition
// fired? Probably? And do something special with that? I don't know.
boxOne.addEventListener('transitionend', function() {
boxTwo.classList.toggle('active');
})
boxTwo.addEventListener('transitionend', function() {
boxOne.classList.toggle('active');
})
});
})();
#transition-end-event-trigger-something-else {
.box {
width: 150px;
height: 150px;
}
.transition-trigger-box-one,
.transition-trigger-box-two {
position: relative;
left: 0;
transition: left 0.125s ease-out;
&.active {
transition: left 1s ease-in;
}
}
.transition-trigger-box-one {
&.active {
left: -200px;
}
}
.transition-trigger-box-two {
&.active {
left: 200px;
}
}
}
No notes defined.