社区网站如何做,做类似58同城大型网站,景德镇市场建设局网站,phpmyadmin 备份 wordpress1.react-transition-group介绍
对于实现一个组件的显示与消失的过渡动画#xff0c;可以通过原生的CSS来实现这些过渡动画#xff0c;但是React社区为我们提供了react-transition-group库用来完成过渡动画。 # npm npm install react-transition-group --save # yarn yar…1.react-transition-group介绍
对于实现一个组件的显示与消失的过渡动画可以通过原生的CSS来实现这些过渡动画但是React社区为我们提供了react-transition-group库用来完成过渡动画。 # npm npm install react-transition-group --save # yarn yarn add react-transition-group 2.react-transition-group主要组件
TransitionCSSTransitionSwitchTransitionTransitionGroup
2.1 CSSTransition
CSSTransition是基于Transition组件构建的 CSSTransition执行过程中有三个状态appear、enter、exit 对应三种状态 第一类 开始状态 对于的类是-appear、-enter、exit 第二类 执行动画 对应的类是-appear-active、-enter-active、-exit-active 第三类执行结束对应的类是-appear-done、-enter-done、-exit-done
2.2 CSSTransition常见对应的属性 in触发进入或者退出状态 如果添加了unmountOnExit{true}那么该组件会在执行退出动画结束后被移除掉当in为true时触发进入状态会添加-enter、-enter-acitve的class开始执行动画当动画执行结束后会移除两个class并且添加-enter-done的class当in为false时触发退出状态会添加-exit、-exit-active的class开始执行动画当动画执行结束后会移除两个class并且添加-enter-done的class classNames动画class的名称 决定了在编写css时对应的class名称比如card-enter、card-enter-active、card-enter-done timeout过渡动画的时间 appear 是否在初次进入添加动画需要和in同时为true unmountOnExit退出后卸载组件 import React, { createRef, PureComponent } from react
import { CSSTransition } from react-transition-group
import ./style.cssexport class App extends PureComponent {constructor(props) {super(props)this.state {isShow: true}this.sectionRef createRef()}render() {const { isShow } this.statereturn (divbutton onClick{e this.setState({isShow: !isShow})}切换/button{/* { isShow h2哈哈哈/h2 } */}CSSTransition nodeRef{this.sectionRef}in{isShow} unmountOnExit{true} classNameswhy timeout{2000}appearonEnter{e console.log(开始进入动画)}onEntering{e console.log(执行进入动画)}onEntered{e console.log(执行进入结束)}onExit{e console.log(开始离开动画)}onExiting{e console.log(执行离开动画)}onExited{e console.log(执行离开结束)}div classNamesection ref{this.sectionRef}h2哈哈哈/h2p我是内容, 哈哈哈/p/div/CSSTransition/div)}
}export default App .why-appear, .why-enter {opacity: 0;
}.why-appear-active, .why-enter-active {opacity: 1;transition: opacity 2s ease;
}/* 离开动画 */
.why-exit {opacity: 1;
}.why-exit-active {opacity: 0;transition: opacity 2s ease;
}2.3 SwitchTransition SwitchTransition可以完成两个组件之间切换的炫酷动画 比如我们有一个按钮需要在on和off之间切换我们希望看到on先从左侧退出off再从右侧进入 SwitchTransition中主要有一个属性mode有两个值 in-out表示新组件先进入旧组件再移除 out-in表示就组件先移除新组建再进入 import React, { PureComponent } from react
import { SwitchTransition, CSSTransition } from react-transition-group
import ./style.cssexport class App extends PureComponent {constructor() {super() this.state {isLogin: true}}render() {const { isLogin } this.statereturn (divSwitchTransition modeout-inCSSTransitionkey{isLogin ? exit: login}classNameslogintimeout{1000}button onClick{e this.setState({ isLogin: !isLogin })}{ isLogin ? 退出: 登录 }/button/CSSTransition/SwitchTransition/div)}
}export default App .login-enter {transform: translateX(100px);opacity: 0;
}.login-enter-active {transform: translateX(0);opacity: 1;transition: all 1s ease;
}.login-exit {transform: translateX(0);opacity: 1;
}.login-exit-active {transform: translateX(-100px);opacity: 0;transition: all 1s ease;
} 2.4 TransitionGroup 将多个动画放到一组动画里执行通过TransitionGroup组件实现; 例如书籍列表的添加与删除动画为每个书籍项添加新增与删除动画; import React, { PureComponent } from react
import { TransitionGroup, CSSTransition } from react-transition-group
import ./style.cssexport class App extends PureComponent {constructor() {super()this.state {books: [{ id: 111, name: 你不知道JS, price: 99 },{ id: 222, name: JS高级程序设计, price: 88 },{ id: 333, name: Vuejs高级设计, price: 77 },]}}addNewBook() {const books [...this.state.books]books.push({ id: new Date().getTime(), name: React高级程序设计, price: 99 })this.setState({ books })}removeBook(index) {const books [...this.state.books]books.splice(index, 1)this.setState({ books })}render() {const { books } this.statereturn (divh2书籍列表:/h2TransitionGroup componentul{books.map((item, index) {return (CSSTransition key{item.id} classNamesbook timeout{1000}lispan{item.name}-{item.price}/spanbutton onClick{e this.removeBook(index)}删除/button/li/CSSTransition)})}/TransitionGroupbutton onClick{e this.addNewBook()}添加新书籍/button/div)}
}export default App .book-enter {transform: translateX(150px);opacity: 0;
}.book-enter-active {transform: translateX(0);opacity: 1;transition: all 1s ease;
}.book-exit {transform: translateX(0);opacity: 1;
}.book-exit-active {transform: translateX(150px);opacity: 0;transition: all 1s ease;
}
