我正在处理 Barba.js ,我正在尝试制作两个不同的动画:
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
});
},
}]
});
有帮助吗?谢谢!!