<section id="transition-end-event-chain" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="triggerOne" class="box transition-succession-box-one">
To the left!
</div>
<div id="triggerTwo" class="box transition-succession-box-two">
To the right!
</div>
<div id="triggerThree" class="box transition-succession-box-three">
Up the middle!
</div>
</section>
<script src="../../js/components/transition-end-event-chain.js"></script>
<section id="transition-end-event-chain" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="triggerOne" class="box transition-succession-box-one">
To the left!
</div>
<div id="triggerTwo" class="box transition-succession-box-two">
To the right!
</div>
<div id="triggerThree" class="box transition-succession-box-three">
Up the middle!
</div>
</section>
<script src="{{ path '/js/components/transition-end-event-chain.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("transition-end-event-chain active");
const button = document.querySelector('#trigger');
const boxOne = document.querySelector('#triggerOne');
const boxTwo = document.querySelector('#triggerTwo');
const boxThree = document.querySelector('#triggerThree');
// Just adding the active class to the first box to start the reaction
button.addEventListener('click', function () {
boxOne.classList.toggle('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() {
boxThree.classList.toggle('active');
})
});
})();
#transition-end-event-chain {
// Transition succession boxes.
// Note: using super-short transition times on the "return" states because we need transition events to fire for boxes
// two and three to reset. I could be less lazy and have the button toggle all the active states simultaneously if the
// first is active, but I'm not doing that right now because I am lazy.
.transition-succession-box-one,
.transition-succession-box-two,
.transition-succession-box-three {
position: relative;
left: 0;
top: 0;
transition: left 0.00001s linear, top 0.00001s linear;
&.active {
transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
}
}
.transition-succession-box-one {
&.active {
left: -120px;
}
}
.transition-succession-box-two {
&.active {
left: 120px;
}
}
.transition-succession-box-three {
&.active {
top: -200px;
}
}
}
No notes defined.