add open anim

This commit is contained in:
yiminghe 2015-08-25 11:11:21 +08:00
commit 70d04d9d31
8 changed files with 51 additions and 99 deletions

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -100,6 +100,9 @@
color: gray;
}
}
&-node-selected {
background-color: tint(@primary-color, 90%);
}
&-icon__open {
margin-right: 2px;
vertical-align: top;

View File

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