Jquery 铬（scaleY）过渡行为

所以我一直在开发一个基于CSS转换的轻量级插件。它能够动态添加内联样式（转换）

插件代码的某些部分（如CSS属性前缀）被删除，以使事情更清楚：

（函数（$、窗口、文档）{
"严格使用",；
var插件=‘转换’；
//建设者
功能转换（元素、动画、选项）{
this.element=元素；
这个动画=动画；
this.direction=null；
this.settings=$.extend（{}，$.fn[plugin]。默认值，选项）；
this.init（）；
}
//实例
$.extend（Transition.prototype{
init:function（）{
var实例=这个；
instance.direction=$（instance.element）.is（':visible'）？//切换
“向外”：
“向内”；
setTimeout（function（）{//分离队列条目以确保完成以前的重新绘制事件
instance.settings.animations.hasOwnProperty（instance.animation）？
instance.start（）：
错误（'试图调用未定义的动画'）；
}, 0);
},
/**
*开始过渡。
*/
开始：函数（）{
var instance=this，
$element=$（instance.element）；
//绑定处理程序
$element
.one（'transitionstart'，function（）{
instance.settings.onStart.call（$element）；
})
.one（'transitionend'，function（）{
end（）；
});
//添加内联样式
$element
.css（instance.style（'start'））
.show（）//确保元素可见
.css（instance.style（'end'））；
},
/**
*结束过渡。
*/
完:函数(){
var instance=this，
$element=$（instance.element）；
instance.direction==“向内”？
$element.show（）：
$element.hide（）；
instance.settings.onEnd.call（$element）；
$element.css({
不透明度：“”，
转换：“”，
转换源：“”，
转换：“”
}).dequeue（）；
},
/**
*获取转换的内联样式。
*
*@param状态
*/
样式：函数（状态）{
var instance=this，
animation=instance.settings.animations[instance.animation]，
方向=实例.direction，
css={}；
如果（状态==‘开始’）{
css=（方向='向内'）？
animation.start：
animation.end；//反转
css['transition']='all'+
instance.settings.duration+'ms'+
instance.settings.curve+“”
instance.settings.delay+“ms”；
}否则{
css=（方向='向内'）？
动画。结束：
animation.start；//已反转
}
返回css；
}
});
//插件定义
$.fn[插件]=函数（动画、选项）{
返回此值。每个（函数（）{
$（this）.queue（函数（）{
新过渡（此、动画、选项）；
});
});
};
//默认设置
$.fn[插件]。默认值={
持续时间：500，
延迟：0，
曲线：“轻松”，
onStart:function（）{}，
onEnd:function（）{}
};
$.fn[插件].defaults.animations={
褪色：{
开始：{“不透明度”：0}，
结束：{“不透明度”：1}
},
比例：{
开始：{'opacity'：0，'transform'：'scale（0.8）}，
结束：{'opacity'：1，'transform'：'scale（1.0）}
},
幻灯片：{
开始：{'opacity'：0，'transform'：'scaleY（0）'，'transform origin'：'bottom'}，
结束：{'opacity'：1，'transform'：'scaleY（1）'，'transform origin'：'bottom'}
}
};
})（jQuery、窗口、文档）；
$（#fade'）.transition（'fade'，{duration:1000，delay:1000}）；
$（'缩放'）.transition（'缩放'，{持续时间：1000，延迟：1000}）；
$（#slide'）.transition（'slide'，{duration:1000，delay:1000}）
div{
显示：内联块；
边缘底部：1米；
填充物：3em2em；
背景色：#EEE；
边框：1px纯红；
}

衰落块
缩放块
滑动块
这是一个已知的错误，具有转换比例（0）。只需将其更改为“比例”（0.01）


（函数（$、窗口、文档）{
"严格使用",；
var插件=‘转换’；
//建设者
功能转换（元素、动画、选项）{
this.element=元素；
这个动画=动画；
this.direction=null；
this.settings=$.extend（{}，$.fn[plugin]。默认值，选项）；
this.init（）；
}
//实例
$.extend（Transition.prototype{
init:function（）{
var实例=这个；
instance.direction=$（instance.element）.is（':visible'）？//切换
“向外”：
“向内”；
setTimeout（function（）{//分离队列条目以确保完成以前的重新绘制事件
instance.settings.animations.hasOwnProperty（instance.animation）？
instance.start（）：
错误（'试图调用未定义的动画'）；
}, 0);
},
/**
*开始过渡。
*/
开始：函数（）{
var instance=this，
$element=$（instance.element）；
//绑定处理程序
$element
.one（'transitionstart'，function（）{
instance.settings.onStart.call（$element）；
})
.1（'transitionend'