前端大厂最新面试题-animation.docx

前端大厂最新面试题-animation.docx React 中实现组件间过渡动画的方法有多种选择，如 react-transition-group、react-motion、Animated 以及原生的 CSS 都能完成切换动画。其中，react-transition-group 是一种很好的解决方案，它提供了三个主要的组件：CSSTransition、SwitchTransition 和 TransitionGroup。 CSSTransition 是一种常用的实现过渡动画的方式，它可以帮助我们方便地实现组件的入场和离场动画。其实现动画的原理在于，当 CSSTransition 的 in 属性置为 true 时，CSSTransition 首先会给其子组件加上 xxx-enter、xxx-enter-active 的 class 执行动画，当动画执行结束后，会移除两个 class，并且添加-enter-done 的 class。这样可以利用这一点，通过 CSS 的 transition 属性，让元素在两个状态之间平滑过渡，从而得到相应的动画效果。 例如，下面是一个使用 CSSTransition 实现过渡动画的示例代码： ```jsx import React, { PureComponent } from 'react'; import { CSSTransition } from 'react-transition-group'; export default class App2 extends PureComponent { state = { show: true }; onToggle = () => this.setState({ show: !this.state.show }); render() { const { show } = this.state; return ( <div className={'container'}> <div className={'square-wrapper'}> <CSSTransition in={show} timeout={500} classNames={'fade'} unmountOnExit={true} > <div className={'square'} /> </CSSTransition> </div> <Button onClick={this.onToggle}>toggle</Button> </div> ); } } ``` 对应的 CSS 样式如下： ```css .fade-enter { opacity: 0; transform: translateX(100%); } .fade-enter-active { opacity: 1; transform: translateX(0); transition: all 500ms; } .fade-exit { opacity: 1; transform: translateX(0); } .fade-exit-active { opacity: 0; transform: translateX(-100%); transition: all 500ms; } ``` SwitchTransition 是一种实现两个组件之间切换的炫酷动画的方式。它主要有一个属性 mode，对应两个值：in-out 和 out-in。in-out 表示新组件先进入，旧组件再移除；out-in 表示旧组件先移除，新组建再进入。 例如，下面是一个使用 SwitchTransition 实现按钮入场和出场的示例代码： ```jsx import { SwitchTransition, CSSTransition } from 'react-transition-group'; export default class SwitchExample extends PureComponent { state = { isOn: true }; onToggle = () => this.setState({ isOn: !this.state.isOn }); render() { const { isOn } = this.state; return ( <div> <SwitchTransition mode="out-in"> {isOn ? ( <CSSTransition key="on" timeout={500} classNames="on" > <Button>On</Button> </CSSTransition> ) : ( <CSSTransition key="off" timeout={500} classNames="off" > <Button>Off</Button> </CSSTransition> )} </SwitchTransition> <Button onClick={this.onToggle}>Toggle</Button> </div> ); } } ``` react-transition-group 是一种非常实用的解决方案，可以帮助我们快速实现过渡动画效果。