mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
add open anim
This commit is contained in:
commit
70d04d9d31
40
components/common/openAnimation.js
Normal file
40
components/common/openAnimation.js
Normal file
@ -0,0 +1,40 @@
|
||||
import velocity from 'velocity-animate';
|
||||
|
||||
function animate(node, show, transitionName, done) {
|
||||
let ok;
|
||||
|
||||
function complete() {
|
||||
if (!ok) {
|
||||
ok = true;
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
// Fix safari flash bug
|
||||
node.style.display = show ? 'block' : 'none';
|
||||
velocity(node, transitionName, {
|
||||
duration: 240,
|
||||
complete: complete,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
return {
|
||||
stop() {
|
||||
velocity(node, 'finish');
|
||||
complete();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const animation = {
|
||||
enter(node, done) {
|
||||
animate(node, false, 'slideDown', done);
|
||||
},
|
||||
leave(node, done) {
|
||||
animate(node, true, 'slideUp', done);
|
||||
},
|
||||
appear(node, done) {
|
||||
animate(node, false, 'slideDown', done);
|
||||
},
|
||||
};
|
||||
|
||||
export default animation;
|
@ -1,38 +1,7 @@
|
||||
import React from 'react';
|
||||
import Menu from 'rc-menu';
|
||||
import velocity from 'velocity-animate';
|
||||
|
||||
const animation = {
|
||||
enter(node, done) {
|
||||
this.animate(node, 'slideDown', done);
|
||||
},
|
||||
leave(node, done) {
|
||||
this.animate(node, 'slideUp', done);
|
||||
},
|
||||
appear() {
|
||||
return this.enter.apply(this, arguments);
|
||||
},
|
||||
animate(node, transitionName, done) {
|
||||
let ok;
|
||||
function complete() {
|
||||
if (!ok) {
|
||||
ok = true;
|
||||
done();
|
||||
}
|
||||
}
|
||||
velocity(node, transitionName, {
|
||||
duration: 240,
|
||||
complete: complete,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
return {
|
||||
stop() {
|
||||
velocity(node, 'finish');
|
||||
complete();
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
import animation from '../common/openAnimation';
|
||||
|
||||
const AntMenu = React.createClass({
|
||||
getDefaultProps() {
|
||||
|
@ -5,7 +5,6 @@ import Checkbox from '../checkbox';
|
||||
import FilterDropdown from './filterDropdown';
|
||||
import Pagination from '../pagination';
|
||||
import objectAssign from 'object-assign';
|
||||
import equals from 'is-equal-shallow';
|
||||
|
||||
function noop() {
|
||||
}
|
||||
@ -31,12 +30,8 @@ class DataSource {
|
||||
}
|
||||
}
|
||||
|
||||
clone(config) {
|
||||
if (config) {
|
||||
return new DataSource(objectAssign(config, this.config));
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
clone(config = {}) {
|
||||
return new DataSource(objectAssign(config, this.config));
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,7 +74,8 @@ var AntTable = React.createClass({
|
||||
});
|
||||
}
|
||||
if (!this.isLocalDataSource()) {
|
||||
if (!equals(nextProps, this.props)) {
|
||||
// 外界只有 dataSource 的变化会触发请请求
|
||||
if (nextProps.dataSource !== this.props.dataSource) {
|
||||
this.setState({
|
||||
selectedRowKeys: [],
|
||||
loading: true
|
||||
|
@ -1,61 +1,7 @@
|
||||
import React from 'react';
|
||||
import Tree from 'rc-tree';
|
||||
import velocity from 'velocity-animate';
|
||||
|
||||
const animation = {
|
||||
enter(node, done){
|
||||
var ok = false;
|
||||
|
||||
function complete() {
|
||||
if (!ok) {
|
||||
ok = 1;
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
node.style.display = 'none';
|
||||
velocity(node, 'slideDown', {
|
||||
duration: 300,
|
||||
complete: complete
|
||||
});
|
||||
return {
|
||||
stop: function () {
|
||||
velocity(node, 'finish');
|
||||
// velocity complete is async
|
||||
complete();
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
appear(){
|
||||
return this.enter.apply(this, arguments);
|
||||
},
|
||||
|
||||
leave(node, done){
|
||||
var ok = false;
|
||||
|
||||
node.style.display = 'block';
|
||||
|
||||
function complete() {
|
||||
if (!ok) {
|
||||
ok = 1;
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
velocity(node, 'slideUp', {
|
||||
duration: 300,
|
||||
complete: complete
|
||||
});
|
||||
return {
|
||||
stop: function () {
|
||||
velocity(node, 'finish');
|
||||
// velocity complete is async
|
||||
complete();
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
||||
import animation from '../common/openAnimation';
|
||||
|
||||
const AntTree = React.createClass({
|
||||
getDefaultProps() {
|
||||
|
@ -8,4 +8,4 @@ export default function getFileItem(file, fileList) {
|
||||
}
|
||||
})[0];
|
||||
return target;
|
||||
};
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "0.8.0-beta6",
|
||||
"version": "0.8.0-beta7",
|
||||
"stableVersion": "0.7.3",
|
||||
"title": "Ant Design",
|
||||
"description": "一个 UI 设计语言",
|
||||
@ -36,7 +36,6 @@
|
||||
"enter-animation": "~0.3.0",
|
||||
"gregorian-calendar": "~3.0.0",
|
||||
"gregorian-calendar-format": "~3.0.1",
|
||||
"is-equal-shallow": "~0.1.3",
|
||||
"object-assign": "3.x",
|
||||
"rc-animate": "~1.2.0",
|
||||
"rc-calendar": "~3.15.0",
|
||||
|
@ -100,6 +100,9 @@
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
&-node-selected {
|
||||
background-color: tint(@primary-color, 90%);
|
||||
}
|
||||
&-icon__open {
|
||||
margin-right: 2px;
|
||||
vertical-align: top;
|
||||
|
1
webpack.config.min.js
vendored
1
webpack.config.min.js
vendored
@ -7,7 +7,6 @@ var config = require("./webpack.config.js");
|
||||
|
||||
config.plugins = [
|
||||
new ExtractTextPlugin('[name].min.css'),
|
||||
new webpack.IgnorePlugin(/xhr2/),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
output: {
|
||||
ascii_only: true
|
||||
|
Loading…
Reference in New Issue
Block a user