Skip to content

Fix height #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 13, 2015
+38 −36
Merged

Fix height #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c0ce15
feat: fix bug when componentDidMount context fix height
Jul 13, 2015
2961b58
chore: change demo
Jul 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@
transition-duration: .3s;
transition-timing-function: ease-in;
overflow: hidden;
}

&-content-active {
opacity: 1;
height: auto;
> p, > div {
Copy link
Member

@yiminghe yiminghe Jul 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为什么要 style 用户的内容

Copy link
Contributor Author

@shepherdwind shepherdwind Jul 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果直接设置在content-active上，动画的时候去掉-content-active这个class，然后一下子就把padding去掉。就会抖动，很丑。

不过也可以再增加一个div层，但是那样div层有点太多了。所以就这样搞了

margin-top: 16px;
margin-bottom: 16px;
}
}
}

Expand Down
11 changes: 10 additions & 1 deletion examples/simple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@ var Test = React.createClass({
</Panel>
);
}
items.push(
<Panel header={`This is panel header 4`} key="4">
<Collapse defaultActiveKey="1">
<Panel header={`This is panel nest panel`} key="1">
<p>{text}</p>
</Panel>
</Collapse>
</Panel>
);

return items;
},
Expand All @@ -58,7 +67,7 @@ var Test = React.createClass({
<button onClick={this.reRender}>reRender</button>
<button onClick={this.toggle}>{btn}</button><br/><br/>
<button onClick={this.setActivityKey}>active header 2</button><br/><br/>
<Collapse accordion={accordion} activeKey={activeKey} defaultActiveKey={['3']}>{this.getItems()}</Collapse>
<Collapse accordion={accordion} activeKey={activeKey} defaultActiveKey={['4']}>{this.getItems()}</Collapse>
</div>;
}
});
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rc-collapse",
"version": "1.2.0",
"version": "1.2.1",
"description": "rc-collapse ui component for react",
"keywords": [
"react",
Expand Down
52 changes: 23 additions & 29 deletions src/Panel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ module.exports = createClass({
componentDidMount() {
if (this.props.isActive) {
var el = findDOMNode(this.refs.content);
el.style.height = el.scrollHeight + 'px';
el.style.height = 'auto';
el.style.opacity = 1;
}
},

Expand All @@ -71,33 +72,26 @@ module.exports = createClass({
return;
}

// current isActive
if (!isActive) {
var preNode = findDOMNode(this.refs.content);
preNode.style.height = preNode.scrollHeight + 'px';
preNode.style.opacity = 1;
cssAnimation.setTransition(preNode, 'Property', 'height ,opacity');
cssAnimation.style(preNode, {
height: 0,
opacity: 0
}, function() {
preNode.style.height = '';
preNode.style.opacity = '';
cssAnimation.setTransition(preNode, 'Property', '');
});
} else {
// from isActive to hide
var currentNode = findDOMNode(this.refs.content);
currentNode.style.height = 0;
cssAnimation.setTransition(currentNode, 'Property', 'height ,opacity');
cssAnimation.style(currentNode, {
height: currentNode.scrollHeight + 'px',
opacity: 1
}, function() {
currentNode.style.height = 'auto';
currentNode.style.opacity = 1;
cssAnimation.setTransition(currentNode, 'Property', '');
});
}
this._anim(isActive ? 0 : 1);
},

_anim(opacity) {
var el = findDOMNode(this.refs.content);
var scrollHeight = el.scrollHeight + 'px';

// start state
el.style.height = opacity ? scrollHeight : 0;
el.style.opacity = opacity;

cssAnimation.setTransition(el, 'Property', 'height ,opacity');
cssAnimation.style(el, {
height: opacity ? 0 : scrollHeight,
opacity: opacity ? 0 : 1
}, function() {
el.style.height = opacity ? 0 : 'auto';
el.style.opacity = opacity ? 0 : 1;
cssAnimation.setTransition(el, 'Property', '');
});
}

});