关闭之后再进入的问题
在关闭后再次进入会出现图片跟随pop一起进入的动画,然后再瞬间消失,再以设定好的由小到大的动画入场
$(function(){
//(function($){
var container = $('.container');
var box = $('.box');
var buddy = $('.buddy');
var inner = $('.inner');
var pop = $('.pop');
var close = $('.close');
var open = $('.btn');
var imgs = pop.find('img');
//定义动画
//高度变化入场动画
$.Velocity.RegisterUI('lixin.slideUpIn',{
defaultDuration: 500,
calls: [
//opacity:透明度,1:结束时的透明度,0:开始的
//translateY:Y轴的高度变化
[{opacity: [1,0],translateY: [0,100]}]
]
});
//高度变化出场动画
$.Velocity.RegisterUI('lixin.slideDownOut',{
defaultDuration: 300,
calls: [
[{opacity: [0,1],translateY: [100,0]}]
]
});
//大小变化的入场动画
$.Velocity.RegisterUI('lixin.scaleIn',{
defaultDuration: 300,
calls: [
//scale:大小变化,从0.3到1倍大小
[{opacity: [1,0],scale: [1,0.3]}]
]
});
//大小变化的出场动画
$.Velocity.RegisterUI('lixin.scaleOut',{
defaultDuration: 300,
calls: [
//scale:大小变化,从0.3到1倍大小
[{opacity: [0,1],scale: [0.3,]}]
]
});
var seqInit = [
{
elements: container,
properties: 'lixin.slideUpIn',
option: {
delay: 300
}
},
{
elements: box,
properties: 'lixin.slideUpIn',
option: {
sequenceQueue: false
}
}, {
elements: buddy,
properties: 'lixin.slideUpIn',
option: {
sequenceQueue: false,
delay: 60
}
}
];
var seqClick = [
{
elements: container,
properties: 'lixin.slideDownOut'
},{
elements: box,
properties: 'lixin.slideDownOut',
option: {
sequenceQueue: false
}
}, {
elements: container,
properties: 'lixin.slideUpIn'
}, {
elements: pop,
properties: 'lixin.slideUpIn',
option: {
sequenceQueue: false
}
},{
elements: imgs,
properties: 'lixin.scaleIn'
}
];
var seqClose = [
{
elements: imgs,
properties: 'lixin.scaleOut'
},{
elements: container,
properties: 'lixin.slideDownOut'
},{
elements: pop,
properties: 'lixin.slideDownOut',
option: {
sequenceQueue: false
}
}, {
elements: container,
properties: 'lixin.slideUpIn'
}, {
elements: box,
properties: 'lixin.slideUpIn',
option: {
sequenceQueue: false
}
},{
elements: imgs,
properties: 'lixin.scaleIn'
}
];
$.Velocity.RunSequence(seqInit);
open.on('click',function(){
$.Velocity.RunSequence(seqClick);
});
close.on('click',function(){
$.Velocity.RunSequence(seqClose);
});
//})(jQuery);
});
