p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

优化collapse/tabs动画

This commit is contained in:
catchonme 2019-08-13 20:10:11 +08:00
parent 155ecfa1cb
commit 500d3f8a12
4 changed files with 22 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
scss/components/_collapse.scss
View File

@ -41,20 +41,11 @@
user-select: none; user-select: none;
} }
> .collapse { &-content {
display: none; transition: height .35s ease;
&.in { &.in, &.out {
display: block;
visibility: visible;
}
}
> .collapsing {
position: relative;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
transition-property: height, visibility; }
transition-duration: .35s;
transition-timing-function: ease;
} }
} }

6
scss/components/_tabs.scss
View File

@ -61,17 +61,15 @@
&-pane { &-pane {
display: none; display: none;
opacity: 0;
transition: opacity .35s linear;
&.is-active { &.is-active {
display: block; display: block;
} }
&.fade {
opacity: 0;
transition: opacity .35s linear;
&.in { &.in {
opacity: 1; opacity: 1;
} }
} }
}
&--line { &--line {
> .#{$ns}Tabs-links { > .#{$ns}Tabs-links {

20
src/components/Collapse.tsx
View File

@ -5,19 +5,17 @@
*/ */
import React from 'react'; import React from 'react';
import cx from 'classnames';
import css = require('dom-helpers/style'); import css = require('dom-helpers/style');
import {ClassNamesFn, themeable} from '../theme'; import {ClassNamesFn, themeable} from '../theme';
import Transition, { EXITED, ENTERED, ENTERING, EXITING } from 'react-transition-group/Transition'; import Transition, { EXITED, ENTERING, EXITING } from 'react-transition-group/Transition';
import { autobind } from '../utils/helper'; import { autobind } from '../utils/helper';
const collapseStyles: { const collapseStyles: {
[propName: string]: string; [propName: string]: string;
} = { } = {
[EXITED]: 'collapse', [EXITED]: 'out',
[EXITING]: 'collapsing', [EXITING]: 'out',
[ENTERING]: 'collapsing', [ENTERING]: 'in'
[ENTERED]: 'collapse in',
}; };
export interface CollapseProps { export interface CollapseProps {
@ -76,6 +74,7 @@ export class Collapse extends React.Component<CollapseProps, any> {
const { const {
show, show,
children, children,
classnames: cx,
mountOnEnter, mountOnEnter,
unmountOnExit unmountOnExit
} = this.props; } = this.props;
@ -92,16 +91,17 @@ export class Collapse extends React.Component<CollapseProps, any> {
onExit={this.handleExit} onExit={this.handleExit}
onExiting={this.handleExiting} onExiting={this.handleExiting}
> >
{(status:string, innerProps:any) => { {(status:string) => {
if (status === ENTERING) { if (status === ENTERING) {
this.contentDom.offsetWidth; this.contentDom.offsetWidth;
} }
return React.cloneElement(children as any, { return React.cloneElement(children as any, {
...innerProps, ...(children as React.ReactElement).props,
ref: this.contentRef, ref: this.contentRef,
className: cx( className: cx(
collapseStyles[status], 'Collapse-content',
innerProps.className (children as React.ReactElement).props.className,
collapseStyles[status]
) )
})} })}
} }

8
src/components/Tabs.tsx
View File

@ -6,16 +6,14 @@
import React from 'react'; import React from 'react';
import { Schema } from '../types'; import { Schema } from '../types';
import Transition, {ENTERED, ENTERING, EXITED, EXITING} from 'react-transition-group/Transition'; import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
import { ClassNamesFn, themeable } from '../theme'; import { ClassNamesFn, themeable } from '../theme';
const transitionStyles: { const transitionStyles: {
[propName: string]: string; [propName: string]: string;
} = { } = {
[EXITED]: 'fade', [ENTERING]: 'in',
[EXITING]: 'fade', [ENTERED]: 'in'
[ENTERING]: 'fade in',
[ENTERED]: 'fade in'
}; };
export interface TabProps extends Schema { export interface TabProps extends Schema {