Faster animation for Tooltip

This commit is contained in:
afc163 2016-10-07 18:18:23 +08:00
parent 66891a7cc0
commit fc52934c12
3 changed files with 14 additions and 11 deletions

View File

@ -1,5 +1,5 @@
.zoom-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.zoom-motion(@className, @keyframeName, @duration: .2s) {
.make-motion(@className, @keyframeName, @duration);
.@{className}-enter,
.@{className}-appear {
transform: scale(0); // need this by yiminghe
@ -12,8 +12,11 @@
// For Modal
.zoom-motion(zoom, antZoom);
// For Tooltip、Popover、Popconfirm、Dropdown
// For Popover、Popconfirm、Dropdown
.zoom-motion(zoom-big, antZoomBig);
// For Tooltip
.zoom-motion(zoom-big-fast, antZoomBig, .1s);
.zoom-motion(zoom-up, antZoomUp);
.zoom-motion(zoom-down, antZoomDown);
.zoom-motion(zoom-left, antZoomLeft);

View File

@ -1,21 +1,21 @@
.motion-common() {
animation-duration: .2s;
.motion-common(@duration: .2s) {
animation-duration: @duration;
animation-fill-mode: both;
}
.motion-common-leave() {
animation-duration: .2s;
.motion-common-leave(@duration: .2s) {
animation-duration: @duration;
animation-fill-mode: both;
}
.make-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName, @duration: .2s) {
.@{className}-enter,
.@{className}-appear {
.motion-common();
.motion-common(@duration);
animation-play-state: paused;
}
.@{className}-leave {
.motion-common-leave();
.motion-common-leave(@duration);
animation-play-state: paused;
}
.@{className}-enter.@{className}-enter-active,

View File

@ -38,7 +38,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
static defaultProps = {
prefixCls: 'ant-tooltip',
placement: 'top',
transitionName: 'zoom-big',
transitionName: 'zoom-big-fast',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
onVisibleChange() {},