Я имею дело с Barba.js и пытаюсь сделать две разные анимации:
- Первым из них будет специальная анимация для моего раздела about (я просто добавлю класс
about
).
- Второй будет одна и та же анимация для всех моих разделов, включая раздел о
Код ниже, это то, что я сделал сам. Но я нахожу этот код таким избыточным и грязным, потому что я повторяю слишком много кода. Я уверен, что есть какой-то способ улучшить мой код.
barba.init({
transitions: [{
/////// SPECIFIC ANIMATION
name: 'about',
leave: function (data) {
var done = this.async();
$('body').addClass('about');
TweenMax.to(data.current.container, .4, {
opacity: 0,
onComplete: done
});
TweenLite.delayedCall(0.6, myFunction);
function myFunction() {
TweenMax.staggerFromTo(".title", 1, {
opacity: 0.6,
y: -20
}, {
opacity: 0.2,
y: 0
}, 0.2);
}
},
enter: function (data) {
var done = this.async();
TweenMax.from(data.next.container, .4, {
opacity: 0,
onComplete: done
});
},
from: {
// define rule based on multiple route names
namespace: [
'home',
'works'
]
},
to: {
// define rule based on multiple namespaces
namespace: [
'about'
]
}
}, {
name: 'pages',
leave: function (data) {
var done = this.async();
$('body').removeClass('about');
TweenMax.to(data.current.container, .4, {
opacity: 0,
onComplete: done
});
TweenLite.delayedCall(0.6, myFunction);
function myFunction() {
TweenMax.staggerFromTo(".title", 1, {
opacity: 0.6,
y: -20
}, {
opacity: 0.2,
y: 0
}, 0.2);
}
},
enter: function (data) {
var done = this.async();
$('body').removeClass('about');
TweenMax.from(data.next.container, .4, {
opacity: 0,
onComplete: done
});
},
}]
});
Любая помощь? Спасибо !!