@ucloud-pccl/react-components/lib/style/animation.js

UCloud pccl react components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.zoomOut = exports.zoomIn = exports.transitionUp = exports.transitionFlat = exports.transitionDown = exports.spinKeyframes = exports.slideUpOut = exports.slideUpIn = exports.slideOutDown = exports.slideInDown = exports.slideDownOut = exports.slideDownIn = exports.fadeOut = exports.fadeIn = exports.bounceOut = exports.bounceIn = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _core = require("@emotion/core");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
var slideUpIn = exports.slideUpIn = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        opacity: 0;\n        transform-origin: 0% 0%;\n        transform: scaleY(0);\n    }\n    100% {\n        opacity: 1;\n        transform-origin: 0% 0%;\n        transform: scaleY(1);\n    }\n"])));
var slideUpOut = exports.slideUpOut = (0, _core.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        opacity: 1;\n        transform-origin: 0% 0%;\n        transform: scaleY(1);\n    }\n    100% {\n        opacity: 0;\n        transform-origin: 0% 0%;\n        transform: scaleY(0);\n    }\n"])));
var slideDownIn = exports.slideDownIn = (0, _core.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        opacity: 0;\n        transform-origin: 0% 100%;\n        transform: scaleY(0);\n    }\n    100% {\n        opacity: 1;\n        transform-origin: 0% 100%;\n        transform: scaleY(1);\n    }\n"])));
var slideDownOut = exports.slideDownOut = (0, _core.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        opacity: 1;\n        transform-origin: 0% 100%;\n        transform: scaleY(1);\n    }\n    100% {\n        opacity: 0;\n        transform-origin: 0% 100%;\n        transform: scaleY(0);\n    }\n"])));
var fadeIn = exports.fadeIn = (0, _core.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n"])));
var fadeOut = exports.fadeOut = (0, _core.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        opacity: 1;\n    }\n\n    to {\n        opacity: 0;\n    }\n"])));
var bounceIn = exports.bounceIn = (0, _core.keyframes)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    from,\n    20%,\n    40%,\n    60%,\n    80%,\n    to {\n        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n\n    0% {\n        opacity: 0;\n        transform: scale3d(0.3, 0.3, 0.3);\n    }\n\n    20% {\n        transform: scale3d(1.1, 1.1, 1.1);\n    }\n\n    40% {\n        transform: scale3d(0.9, 0.9, 0.9);\n    }\n\n    60% {\n        opacity: 1;\n        transform: scale3d(1.03, 1.03, 1.03);\n    }\n\n    80% {\n        transform: scale3d(0.97, 0.97, 0.97);\n    }\n\n    to {\n        opacity: 1;\n        transform: scale3d(1, 1, 1);\n    }\n"])));
var bounceOut = exports.bounceOut = (0, _core.keyframes)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    20% {\n        transform: scale3d(0.9, 0.9, 0.9);\n    }\n\n    50%,\n    55% {\n        opacity: 1;\n        transform: scale3d(1.1, 1.1, 1.1);\n    }\n\n    to {\n        opacity: 0;\n        transform: scale3d(0.3, 0.3, 0.3);\n    }\n"])));
var zoomIn = exports.zoomIn = (0, _core.keyframes)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        opacity: 0;\n        transform: scale3d(0.3, 0.3, 0.3);\n    }\n\n    50% {\n        opacity: 1;\n    }\n"])));
var zoomOut = exports.zoomOut = (0, _core.keyframes)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 0;\n        transform: scale3d(0.3, 0.3, 0.3);\n    }\n\n    to {\n        opacity: 0;\n    }\n"])));
var slideOutDown = exports.slideOutDown = (0, _core.keyframes)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        transform: translate3d(0, 0, 0);\n    }\n\n    to {\n        visibility: hidden;\n        transform: translate3d(0, 100%, 0);\n    }\n"])));
var slideInDown = exports.slideInDown = (0, _core.keyframes)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        transform: translate3d(0, -100%, 0);\n        visibility: visible;\n    }\n\n    to {\n        transform: translate3d(0, 0, 0);\n    }\n"])));
var spinKeyframes = exports.spinKeyframes = (0, _core.keyframes)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n"])));
var transitionUp = exports.transitionUp = '.22s cubic-bezier(.4,0,.2,1)';
var transitionDown = exports.transitionDown = '.18s cubic-bezier(.4,0,.2,1)';
var transitionFlat = exports.transitionFlat = '.3s cubic-bezier(.645,.045,.355,1)';