Skip to content

fix(location) : 修复多次render导致tab栏下划线动画不流畅的问题 #260

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(location) : 修复多次render导致tab栏下划线动画不流畅的问题 #260

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b77464
fix(location) : 修复多次render导致tab栏下划线动画不流畅的问题
Apr 30, 2020
edf6cf0
fix(location) : 修复多次render导致tab栏下划线动画不流畅的问题
Apr 30, 2020
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
11 changes: 7 additions & 4 deletions src/InkTabBarNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
getActiveIndex,
} from './utils';

function componentDidUpdate(component, init) {
function componentDidUpdate(component, init, prevProps) {
const { styles, panels, activeKey, direction } = component.props;
const rootNode = component.props.getRef('root');
const wrapNode = component.props.getRef('nav') || rootNode;
Expand All @@ -22,7 +22,9 @@ function componentDidUpdate(component, init) {
// prevent mount animation
inkBarNodeStyle.display = 'none';
}
if (activeTab) {
// !prevProps || activeKey !== prevProps.activeKey条件为了防止多次设置同样的activeKey会导致动画重复,不流畅的问题.如点击tab进行三次render,下划线会三次闪顿再回到目标tab
// In order to prevent the problem that setting the same activeKey for many times.And it will cause animation to not smoothly.For example, if you click the tab once, and it will render three times.Then,the underline will flash three times and back to final position
if (activeTab && (!prevProps || activeKey !== prevProps.activeKey)) {
const tabNode = activeTab;
const transformSupported = isTransform3dSupported(inkBarNodeStyle);

Expand Down Expand Up @@ -94,8 +96,9 @@ export default class InkTabBarNode extends React.Component {
}, 0);
}

componentDidUpdate() {
componentDidUpdate(this);
componentDidUpdate(prevProps) {
// resolve the probleme that when our component render many times ,inkTabBarNode's animation is not smoothly.
componentDidUpdate(this, false, prevProps);
}

componentWillUnmount() {
Expand Down