Browser Back Button / iOS Swipe browser Nav breaks functionality
PremDev2014 opened this issue · comments
Hi,
Love Highway, thanks for creating it!
I'm finding that everything works really well until I use any type of browser back, (and then forward) navigation be it via built in browser buttons or swiping on mobile platforms.
Could I be implementing your code wrong?
Hard to say without a code example.
Can you share your transition class file?
Yes of course.
Note that there is a little code that changes the style of the animated element depending on which trigger was clicked. I'm finding that when a browser back button is used, the whole thing stops working. Thanks for getting back to me :)
import Highway from '@dogstudio/highway';
import anime from 'animejs/lib/anime.es.js';
const swipe = document.getElementById('swipe')
var newCol
class Fancy extends Highway.Transition {
out({from,trigger,done}) {
if(typeof(newCol)=='undefined')
{
swipe.classList.remove('bg-red-900')
}
else {
swipe.classList.remove(newCol)
}
switch(trigger.getAttribute('id'))
{
case 'thome':
swipe.classList.add('bg-pink-300')
newCol = 'bg-pink-300'
break;
case 'tabout':
swipe.classList.add('bg-indigo-300')
newCol = 'bg-indigo-300'
break;
case 'tcontact':
swipe.classList.add('bg-blue-300')
newCol = 'bg-blue-300'
break;
case 'tshows':
swipe.classList.add('bg-purple-300')
newCol = 'bg-purple-300'
break;
case 'tprofile':
swipe.classList.add('bg-red-300')
newCol = 'bg-red-300'
break;
}
anime({
targets: swipe,
scale: 2000,
duration: 900,
easing: 'cubicBezier(.5, .05, .1, .3)',
complete: function () { done() }
})
}
in({from,to,trigger,done}) {
from.remove()
anime({
targets: swipe,
scale: 0,
duration: 800,
easing: 'cubicBezier(.5, .05, .1, .3)',
complete: function () { done() }
})
anime({
targets: to,
scale: ['1.4', '1'],
duration: 900,
easing: 'easeInQuad'
})
}
}
export default Fancy;