align组件
This commit is contained in:
ahua52
parent
942840bb98
commit
9d25b9508c
|
|
@ -0,0 +1,139 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import align from 'dom-align';
|
||||
import addEventListener from './addEventListener';
|
||||
//import isWindow from './isWindow';
|
||||
|
||||
function isWindow(obj) {
|
||||
/* eslint no-eq-null: 0 */
|
||||
/* eslint eqeqeq: 0 */
|
||||
return obj != null && obj == obj.window;
|
||||
}
|
||||
|
||||
function buffer(fn, ms) {
|
||||
let timer;
|
||||
|
||||
function clear() {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function bufferFn() {
|
||||
clear();
|
||||
timer = setTimeout(fn, ms);
|
||||
}
|
||||
|
||||
bufferFn.clear = clear;
|
||||
|
||||
return bufferFn;
|
||||
}
|
||||
|
||||
const Align = React.createClass({
|
||||
propTypes: {
|
||||
childrenProps: PropTypes.object,
|
||||
align: PropTypes.object.isRequired,
|
||||
target: PropTypes.func,
|
||||
onAlign: PropTypes.func,
|
||||
monitorBufferTime: PropTypes.number,
|
||||
monitorWindowResize: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
},
|
||||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
target() {
|
||||
return window;
|
||||
},
|
||||
onAlign() {
|
||||
},
|
||||
monitorBufferTime: 50,
|
||||
monitorWindowResize: false,
|
||||
disabled: false,
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
const props = this.props;
|
||||
// if parent ref not attached .... use document.getElementById
|
||||
this.forceAlign();
|
||||
if (!props.disabled && props.monitorWindowResize) {
|
||||
this.startMonitorWindowResize();
|
||||
}
|
||||
},
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
let reAlign = false;
|
||||
const props = this.props;
|
||||
|
||||
if (!props.disabled) {
|
||||
if (prevProps.disabled || prevProps.align !== props.align) {
|
||||
reAlign = true;
|
||||
} else {
|
||||
const lastTarget = prevProps.target();
|
||||
const currentTarget = props.target();
|
||||
if (isWindow(lastTarget) && isWindow(currentTarget)) {
|
||||
reAlign = false;
|
||||
} else if (lastTarget !== currentTarget) {
|
||||
reAlign = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (reAlign) {
|
||||
this.forceAlign();
|
||||
}
|
||||
|
||||
if (props.monitorWindowResize && !props.disabled) {
|
||||
this.startMonitorWindowResize();
|
||||
} else {
|
||||
this.stopMonitorWindowResize();
|
||||
}
|
||||
},
|
||||
|
||||
componentWillUnmount() {
|
||||
this.stopMonitorWindowResize();
|
||||
},
|
||||
|
||||
startMonitorWindowResize() {
|
||||
if (!this.resizeHandler) {
|
||||
this.bufferMonitor = buffer(this.forceAlign, this.props.monitorBufferTime);
|
||||
this.resizeHandler = addEventListener(window, 'resize', this.bufferMonitor);
|
||||
}
|
||||
},
|
||||
|
||||
stopMonitorWindowResize() {
|
||||
if (this.resizeHandler) {
|
||||
this.bufferMonitor.clear();
|
||||
this.resizeHandler.remove();
|
||||
this.resizeHandler = null;
|
||||
}
|
||||
},
|
||||
|
||||
forceAlign() {
|
||||
const props = this.props;
|
||||
if (!props.disabled) {
|
||||
const source = ReactDOM.findDOMNode(this);
|
||||
props.onAlign(source, align(source, props.target(), props.align));
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
const { childrenProps, children } = this.props;
|
||||
const child = React.Children.only(children);
|
||||
if (childrenProps) {
|
||||
const newProps = {};
|
||||
for (const prop in childrenProps) {
|
||||
if (childrenProps.hasOwnProperty(prop)) {
|
||||
newProps[prop] = this.props[childrenProps[prop]];
|
||||
}
|
||||
}
|
||||
return React.cloneElement(child, newProps);
|
||||
}
|
||||
return child;
|
||||
},
|
||||
});
|
||||
|
||||
export default Align;
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
|
||||
function defaultGetContainer() {
|
||||
const container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
export default function getContainerRenderMixin(config) {
|
||||
const {
|
||||
autoMount = true,
|
||||
autoDestroy = true,
|
||||
isVisible,
|
||||
getComponent,
|
||||
getContainer = defaultGetContainer,
|
||||
} = config;
|
||||
|
||||
let mixin;
|
||||
|
||||
function renderComponent(instance, componentArg, ready) {
|
||||
if (!isVisible || instance._component || isVisible(instance)) {
|
||||
if (!instance._container) {
|
||||
instance._container = getContainer(instance);
|
||||
}
|
||||
let component;
|
||||
if (instance.getComponent) {
|
||||
component = instance.getComponent(componentArg);
|
||||
} else {
|
||||
component = getComponent(instance, componentArg);
|
||||
}
|
||||
ReactDOM.unstable_renderSubtreeIntoContainer(instance,
|
||||
component, instance._container,
|
||||
function callback() {
|
||||
instance._component = this;
|
||||
if (ready) {
|
||||
ready.call(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (autoMount) {
|
||||
mixin = {
|
||||
...mixin,
|
||||
componentDidMount() {
|
||||
renderComponent(this);
|
||||
},
|
||||
componentDidUpdate() {
|
||||
renderComponent(this);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (!autoMount || !autoDestroy) {
|
||||
mixin = {
|
||||
...mixin,
|
||||
renderComponent(componentArg, ready) {
|
||||
renderComponent(this, componentArg, ready);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function removeContainer(instance) {
|
||||
if (instance._container) {
|
||||
const container = instance._container;
|
||||
ReactDOM.unmountComponentAtNode(container);
|
||||
container.parentNode.removeChild(container);
|
||||
instance._container = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (autoDestroy) {
|
||||
mixin = {
|
||||
...mixin,
|
||||
componentWillUnmount() {
|
||||
removeContainer(this);
|
||||
},
|
||||
};
|
||||
} else {
|
||||
mixin = {
|
||||
...mixin,
|
||||
removeContainer() {
|
||||
removeContainer(this);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return mixin;
|
||||
}
|
||||
|
|
@ -9,3 +9,6 @@ export KeyCode from './keyCode';
|
|||
export contains from './contains';
|
||||
export addEventListener from './addEventListener';
|
||||
export cssAnimation from './cssAnimation';
|
||||
export toArray from './toArray';
|
||||
//export getContainerRenderMixin from './getContainerRenderMixin';
|
||||
export Align from './Align';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function toArray(children) {
|
||||
const ret = [];
|
||||
React.Children.forEach(children, (c) => {
|
||||
ret.push(c);
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
var _domAlign = require('dom-align');
|
||||
|
||||
var _domAlign2 = _interopRequireDefault(_domAlign);
|
||||
|
||||
var _addEventListener = require('./addEventListener');
|
||||
|
||||
var _addEventListener2 = _interopRequireDefault(_addEventListener);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
//import isWindow from './isWindow';
|
||||
|
||||
function isWindow(obj) {
|
||||
/* eslint no-eq-null: 0 */
|
||||
/* eslint eqeqeq: 0 */
|
||||
return obj != null && obj == obj.window;
|
||||
}
|
||||
|
||||
function buffer(fn, ms) {
|
||||
var timer = void 0;
|
||||
|
||||
function clear() {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function bufferFn() {
|
||||
clear();
|
||||
timer = setTimeout(fn, ms);
|
||||
}
|
||||
|
||||
bufferFn.clear = clear;
|
||||
|
||||
return bufferFn;
|
||||
}
|
||||
|
||||
var Align = _react2.default.createClass({
|
||||
propTypes: {
|
||||
childrenProps: _react.PropTypes.object,
|
||||
align: _react.PropTypes.object.isRequired,
|
||||
target: _react.PropTypes.func,
|
||||
onAlign: _react.PropTypes.func,
|
||||
monitorBufferTime: _react.PropTypes.number,
|
||||
monitorWindowResize: _react.PropTypes.bool,
|
||||
disabled: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.any
|
||||
},
|
||||
|
||||
getDefaultProps: function getDefaultProps() {
|
||||
return {
|
||||
target: function target() {
|
||||
return window;
|
||||
},
|
||||
onAlign: function onAlign() {},
|
||||
|
||||
monitorBufferTime: 50,
|
||||
monitorWindowResize: false,
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
componentDidMount: function componentDidMount() {
|
||||
var props = this.props;
|
||||
// if parent ref not attached .... use document.getElementById
|
||||
this.forceAlign();
|
||||
if (!props.disabled && props.monitorWindowResize) {
|
||||
this.startMonitorWindowResize();
|
||||
}
|
||||
},
|
||||
componentDidUpdate: function componentDidUpdate(prevProps) {
|
||||
var reAlign = false;
|
||||
var props = this.props;
|
||||
|
||||
if (!props.disabled) {
|
||||
if (prevProps.disabled || prevProps.align !== props.align) {
|
||||
reAlign = true;
|
||||
} else {
|
||||
var lastTarget = prevProps.target();
|
||||
var currentTarget = props.target();
|
||||
if (isWindow(lastTarget) && isWindow(currentTarget)) {
|
||||
reAlign = false;
|
||||
} else if (lastTarget !== currentTarget) {
|
||||
reAlign = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (reAlign) {
|
||||
this.forceAlign();
|
||||
}
|
||||
|
||||
if (props.monitorWindowResize && !props.disabled) {
|
||||
this.startMonitorWindowResize();
|
||||
} else {
|
||||
this.stopMonitorWindowResize();
|
||||
}
|
||||
},
|
||||
componentWillUnmount: function componentWillUnmount() {
|
||||
this.stopMonitorWindowResize();
|
||||
},
|
||||
startMonitorWindowResize: function startMonitorWindowResize() {
|
||||
if (!this.resizeHandler) {
|
||||
this.bufferMonitor = buffer(this.forceAlign, this.props.monitorBufferTime);
|
||||
this.resizeHandler = (0, _addEventListener2.default)(window, 'resize', this.bufferMonitor);
|
||||
}
|
||||
},
|
||||
stopMonitorWindowResize: function stopMonitorWindowResize() {
|
||||
if (this.resizeHandler) {
|
||||
this.bufferMonitor.clear();
|
||||
this.resizeHandler.remove();
|
||||
this.resizeHandler = null;
|
||||
}
|
||||
},
|
||||
forceAlign: function forceAlign() {
|
||||
var props = this.props;
|
||||
if (!props.disabled) {
|
||||
var source = _reactDom2.default.findDOMNode(this);
|
||||
props.onAlign(source, (0, _domAlign2.default)(source, props.target(), props.align));
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
var _props = this.props,
|
||||
childrenProps = _props.childrenProps,
|
||||
children = _props.children;
|
||||
|
||||
var child = _react2.default.Children.only(children);
|
||||
if (childrenProps) {
|
||||
var newProps = {};
|
||||
for (var prop in childrenProps) {
|
||||
if (childrenProps.hasOwnProperty(prop)) {
|
||||
newProps[prop] = this.props[childrenProps[prop]];
|
||||
}
|
||||
}
|
||||
return _react2.default.cloneElement(child, newProps);
|
||||
}
|
||||
return child;
|
||||
}
|
||||
});
|
||||
|
||||
exports.default = Align;
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports.default = getContainerRenderMixin;
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function defaultGetContainer() {
|
||||
var container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
function getContainerRenderMixin(config) {
|
||||
var _config$autoMount = config.autoMount,
|
||||
autoMount = _config$autoMount === undefined ? true : _config$autoMount,
|
||||
_config$autoDestroy = config.autoDestroy,
|
||||
autoDestroy = _config$autoDestroy === undefined ? true : _config$autoDestroy,
|
||||
isVisible = config.isVisible,
|
||||
getComponent = config.getComponent,
|
||||
_config$getContainer = config.getContainer,
|
||||
getContainer = _config$getContainer === undefined ? defaultGetContainer : _config$getContainer;
|
||||
|
||||
|
||||
var mixin = void 0;
|
||||
|
||||
function _renderComponent(instance, componentArg, ready) {
|
||||
if (!isVisible || instance._component || isVisible(instance)) {
|
||||
if (!instance._container) {
|
||||
instance._container = getContainer(instance);
|
||||
}
|
||||
var component = void 0;
|
||||
if (instance.getComponent) {
|
||||
component = instance.getComponent(componentArg);
|
||||
} else {
|
||||
component = getComponent(instance, componentArg);
|
||||
}
|
||||
_reactDom2.default.unstable_renderSubtreeIntoContainer(instance, component, instance._container, function callback() {
|
||||
instance._component = this;
|
||||
if (ready) {
|
||||
ready.call(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (autoMount) {
|
||||
mixin = _extends({}, mixin, {
|
||||
componentDidMount: function componentDidMount() {
|
||||
_renderComponent(this);
|
||||
},
|
||||
componentDidUpdate: function componentDidUpdate() {
|
||||
_renderComponent(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!autoMount || !autoDestroy) {
|
||||
mixin = _extends({}, mixin, {
|
||||
renderComponent: function renderComponent(componentArg, ready) {
|
||||
_renderComponent(this, componentArg, ready);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _removeContainer(instance) {
|
||||
if (instance._container) {
|
||||
var container = instance._container;
|
||||
_reactDom2.default.unmountComponentAtNode(container);
|
||||
container.parentNode.removeChild(container);
|
||||
instance._container = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (autoDestroy) {
|
||||
mixin = _extends({}, mixin, {
|
||||
componentWillUnmount: function componentWillUnmount() {
|
||||
_removeContainer(this);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
mixin = _extends({}, mixin, {
|
||||
removeContainer: function removeContainer() {
|
||||
_removeContainer(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return mixin;
|
||||
}
|
||||
16
lib/index.js
16
lib/index.js
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.cssAnimation = exports.addEventListener = exports.contains = exports.KeyCode = exports.createChainedFunction = exports.splitComponent = exports.isRequiredForA11y = exports.elementType = exports.deprecated = exports.componentOrElement = exports.all = undefined;
|
||||
exports.Align = exports.toArray = exports.cssAnimation = exports.addEventListener = exports.contains = exports.KeyCode = exports.createChainedFunction = exports.splitComponent = exports.isRequiredForA11y = exports.elementType = exports.deprecated = exports.componentOrElement = exports.all = undefined;
|
||||
|
||||
var _all2 = require('./all');
|
||||
|
||||
|
|
@ -47,6 +47,14 @@ var _cssAnimation2 = require('./cssAnimation');
|
|||
|
||||
var _cssAnimation3 = _interopRequireDefault(_cssAnimation2);
|
||||
|
||||
var _toArray2 = require('./toArray');
|
||||
|
||||
var _toArray3 = _interopRequireDefault(_toArray2);
|
||||
|
||||
var _Align2 = require('./Align');
|
||||
|
||||
var _Align3 = _interopRequireDefault(_Align2);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.all = _all3.default;
|
||||
|
|
@ -59,4 +67,8 @@ exports.createChainedFunction = _createChainedFunction3.default;
|
|||
exports.KeyCode = _keyCode2.default;
|
||||
exports.contains = _contains3.default;
|
||||
exports.addEventListener = _addEventListener3.default;
|
||||
exports.cssAnimation = _cssAnimation3.default;
|
||||
exports.cssAnimation = _cssAnimation3.default;
|
||||
exports.toArray = _toArray3.default;
|
||||
//export getContainerRenderMixin from './getContainerRenderMixin';
|
||||
|
||||
exports.Align = _Align3.default;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = toArray;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function toArray(children) {
|
||||
var ret = [];
|
||||
_react2.default.Children.forEach(children, function (c) {
|
||||
ret.push(c);
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tinper-bee-core",
|
||||
"version": "0.0.10",
|
||||
"version": "0.0.11",
|
||||
"description": "style core and js util for tinper-bee",
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
"dependencies": {
|
||||
"add-dom-event-listener": "^1.0.1",
|
||||
"component-classes": "^1.2.6",
|
||||
"dom-align": "^1.5.2",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -600,3 +600,680 @@
|
|||
margin-top: (($navbar-height - $element-height) / 2);
|
||||
margin-bottom: (($navbar-height - $element-height) / 2);
|
||||
}
|
||||
|
||||
@-webkit-keyframes antSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transform: scaleY(0.8);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSlideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antSlideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 0%;
|
||||
transform-origin: 100% 0%;
|
||||
-webkit-transform: scaleX(0.8);
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antSwingIn {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: translateX(-10px);
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
60% {
|
||||
-webkit-transform: translateX(-5px);
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateX(5px);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
@keyframes antSwingIn {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0px);
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: translateX(-10px);
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
60% {
|
||||
-webkit-transform: translateX(-5px);
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateX(5px);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomOut {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomOut {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomBigIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomBigIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomBigOut {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomBigOut {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomUpOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomUpOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomLeftOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomLeftOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomRightOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomRightOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes antZoomDownOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes antZoomDownOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes rcMenuOpenZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcMenuOpenZoomOut {
|
||||
0% {
|
||||
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes rcMenuOpenSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes rcMenuOpenSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue