mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
add swing
This commit is contained in:
yiminghe
parent
b98a302b9f
commit
ba05e1e53c
@ -7,6 +7,7 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
// or require('antd/components/datepicker');
|
||||
var Datepicker = antd.Datepicker;
|
||||
|
||||
React.render(
|
||||
|
||||
226
components/motion/demo/basic.md
Normal file
226
components/motion/demo/basic.md
Normal file
@ -0,0 +1,226 @@
|
||||
# 基本
|
||||
|
||||
- order: 0
|
||||
|
||||
动画效果示例。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var cssAnimation = antd.cssAnimation;
|
||||
var motions = [];
|
||||
motions = motions.concat([[{
|
||||
name: '淡入',
|
||||
value: 'fade',
|
||||
direction: 'enter',
|
||||
type: '渐隐'
|
||||
}, {
|
||||
name: '淡出',
|
||||
value: 'fade',
|
||||
direction: 'leave',
|
||||
type: '渐隐'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '中心放大',
|
||||
value: 'zoom',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '中心缩小',
|
||||
value: 'zoom',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '上方放大',
|
||||
value: 'zoom-up',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '上方缩小',
|
||||
value: 'zoom-up',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '下方放大',
|
||||
value: 'zoom-down',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '下方缩小',
|
||||
value: 'zoom-down',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '左方放大',
|
||||
value: 'zoom-left',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '左方缩小',
|
||||
value: 'zoom-left',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '右方放大',
|
||||
value: 'zoom-right',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '右方缩小',
|
||||
value: 'zoom-right',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '上方滑入',
|
||||
value: 'move-up',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '上方滑出',
|
||||
value: 'move-up',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '下方滑入',
|
||||
value: 'move-down',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '下方滑出',
|
||||
value: 'move-down',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '左方滑入',
|
||||
value: 'move-left',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '左方滑出',
|
||||
value: 'move-left',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '右方滑入',
|
||||
value: 'move-right',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '右方滑入',
|
||||
value: 'move-right',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '上方展开',
|
||||
value: 'slide-up',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '上方缩回',
|
||||
value: 'slide-up',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '下方展开',
|
||||
value: 'slide-down',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '下方缩回',
|
||||
value: 'slide-down',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '左方展开',
|
||||
value: 'slide-left',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '左方缩回',
|
||||
value: 'slide-left',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '右方展开',
|
||||
value: 'slide-right',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '右方缩回',
|
||||
value: 'slide-right',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '摇摆',
|
||||
value: 'swing',
|
||||
direction: 'enter',
|
||||
type: '其他'
|
||||
}]]);
|
||||
var leave='-leave';
|
||||
var Test = React.createClass({
|
||||
handleChange(e) {
|
||||
var value = e.target.value;
|
||||
if(value){
|
||||
this.demoNode.style.visibility='';
|
||||
cssAnimation(this.demoNode, value, () => {
|
||||
if(value.slice(-leave.length)===leave){
|
||||
this.demoNode.style.visibility='hidden';
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
this.demoNode = React.findDOMNode(this.refs.demo);
|
||||
},
|
||||
|
||||
render() {
|
||||
var options = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
|
||||
var opts = m.map(function (m2) {
|
||||
return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
|
||||
});
|
||||
return <optgroup label={m[0].type}>{opts}</optgroup>;
|
||||
}));
|
||||
return <div>
|
||||
<div className="motion-container">
|
||||
<div ref="demo" className="motion-example">栗子</div>
|
||||
</div>
|
||||
<div className="motion-select">
|
||||
<select onChange={this.handleChange}>{options}</select>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.motion-container {
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.motion-example {
|
||||
background: #4AAFDE;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.motion-select {
|
||||
text-align: center;
|
||||
}
|
||||
.code-boxes-col-2-1 {
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
@ -6,3 +6,20 @@
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 组件的动画
|
||||
|
||||
通过设置组件的 transitionName 指定组件动画
|
||||
|
||||
| 组件 | 中文名 | 采用动画 |
|
||||
|--------------|---------------------|-------------------------------------------------|
|
||||
| popover | 气泡浮出层 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||
| popconfirm | 气泡确认框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||
| tooltip | 文字提示框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||
| modal | 弹出框 | `zoom` |
|
||||
| confirm | 弹出确认框 | `zoom` |
|
||||
| message | 信息提示条 | `move-up` |
|
||||
| dropdown | 下拉菜单 | `slide-up` |
|
||||
| select | 选择框 | `slide-up` |
|
||||
| datepicker | 日期选择框 | `slide-up` |
|
||||
|
||||
|
||||
3
index.js
3
index.js
@ -13,7 +13,8 @@ var antd = {
|
||||
Popconfirm: require('./components/popconfirm'),
|
||||
confirm: require('./components/modal/confirm'),
|
||||
Steps: require('./components/steps'),
|
||||
InputNumber: require('./components/input-number')
|
||||
InputNumber: require('./components/input-number'),
|
||||
cssAnimation: require('css-animation')
|
||||
};
|
||||
|
||||
module.exports = window.antd = antd;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"url": "https://github.com/ant-design/ant-design/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"css-animation": "~1.0.3",
|
||||
"gregorian-calendar": "~3.0.0",
|
||||
"gregorian-calendar-format": "~3.0.1",
|
||||
"rc-calendar": "~3.10.0",
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
.effect() {
|
||||
animation-duration: 0.24s;
|
||||
.motion-common() {
|
||||
animation-duration: .24s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter {
|
||||
opacity: 0;
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-leave {
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active {
|
||||
@ -26,240 +23,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.motion(zoom,zoom);
|
||||
.motion(zoom-up,zoomUp);
|
||||
.motion(zoom-down,zoomDown);
|
||||
.motion(zoom-left,zoomLeft);
|
||||
.motion(zoom-right,zoomRight);
|
||||
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes zoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-up-enter {
|
||||
.effect();
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.slide-up-leave {
|
||||
.effect();
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.slide-up-enter.slide-up-enter-active {
|
||||
animation-name: slideUpIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.slide-up-leave.slide-up-leave-active {
|
||||
animation-name: slideUpOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes slideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes slideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.fade-leave {
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.fade-enter.fade-enter-active {
|
||||
animation-name: fadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.fade-leave.fade-leave-active {
|
||||
animation-name: fadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingCircle {
|
||||
0% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@import "motion/fade";
|
||||
@import "motion/move";
|
||||
@import "motion/other";
|
||||
@import "motion/slide";
|
||||
@import "motion/swing";
|
||||
@import "motion/zoom";
|
||||
|
||||
40
style/core/motion/fade.less
Normal file
40
style/core/motion/fade.less
Normal file
@ -0,0 +1,40 @@
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
.motion-common();
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.fade-leave {
|
||||
.motion-common();
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.fade-enter.fade-enter-active {
|
||||
animation-name: fadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.fade-leave.fade-leave-active {
|
||||
animation-name: fadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
119
style/core/motion/move.less
Normal file
119
style/core/motion/move.less
Normal file
@ -0,0 +1,119 @@
|
||||
.move-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter {
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
}
|
||||
|
||||
.move-motion(move-up, moveUp);
|
||||
.move-motion(move-down, moveDown);
|
||||
.move-motion(move-left, moveLeft);
|
||||
.move-motion(move-right, moveRight);
|
||||
|
||||
@keyframes moveDownIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveDownOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveUpIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveUpOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
10
style/core/motion/other.less
Normal file
10
style/core/motion/other.less
Normal file
@ -0,0 +1,10 @@
|
||||
@keyframes loadingCircle {
|
||||
0% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
119
style/core/motion/slide.less
Normal file
119
style/core/motion/slide.less
Normal file
@ -0,0 +1,119 @@
|
||||
.slide-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter {
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-motion(slide-up, slideUp);
|
||||
.slide-motion(slide-down, slideDown);
|
||||
.slide-motion(slide-left, slideLeft);
|
||||
.slide-motion(slide-right, slideRight);
|
||||
|
||||
@keyframes slideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
30
style/core/motion/swing.less
Normal file
30
style/core/motion/swing.less
Normal file
@ -0,0 +1,30 @@
|
||||
.swing-motion(@className, @keyframeName) {
|
||||
.@{className}-enter {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
.swing-motion(swing, swing);
|
||||
|
||||
@keyframes swingIn {
|
||||
0%, 100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
146
style/core/motion/zoom.less
Normal file
146
style/core/motion/zoom.less
Normal file
@ -0,0 +1,146 @@
|
||||
.zoom-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter {
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-motion(zoom, zoom);
|
||||
.zoom-motion(zoom-up, zoomUp);
|
||||
.zoom-motion(zoom-down, zoomDown);
|
||||
.zoom-motion(zoom-left, zoomLeft);
|
||||
.zoom-motion(zoom-right, zoomRight);
|
||||
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user