Browse Source

add open anim

pull/189/head
yiminghe 9 years ago
parent
commit
70d04d9d31
  1. 40
      components/common/openAnimation.js
  2. 33
      components/menu/index.jsx
  3. 10
      components/table/index.jsx
  4. 56
      components/tree/index.jsx
  5. 2
      components/upload/getFileItem.js
  6. 3
      package.json
  7. 3
      style/components/tree.less
  8. 1
      webpack.config.min.js

40
components/common/openAnimation.js

@ -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;

33
components/menu/index.jsx

@ -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() {

10
components/table/index.jsx

@ -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) {
clone(config = {}) {
return new DataSource(objectAssign(config, this.config));
} else {
return this;
}
}
}
@ -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

56
components/tree/index.jsx

@ -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() {

2
components/upload/getFileItem.js

@ -8,4 +8,4 @@ export default function getFileItem(file, fileList) {
}
})[0];
return target;
};
}

3
package.json

@ -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",

3
style/components/tree.less

@ -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

@ -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…
Cancel
Save