React 基础巩固(二十九)——过渡动画 react-transition-group
过渡动画 react-transition-group
react-transition-group 包含:
- Transition(该组件是一个和平台无关的组件,不一定结合 CSS)
- CSSTransition(通常使用此组件实现过渡动画效果)
- SwitchTransition(两个组件显示/隐藏切换时使用)
- TransitionGroup(将多个动画包裹其中,一般用于列表中元素的动画)
CSSTransition
-
CSSTransition 基于 Transition 组件构建
-
CSSTransition 执行过程中,有三个状态:
appear
、enter
、exit
-
它们有三种状态,需要定义对应的 CSS 样式
- 开始状态:
-apper
,-enter
,exit
- 执行动画:
-appear-active
,-enter-active
,-exit-active
- 执行结束:
-appear-done
,-enter-done
,-exit-done
- 开始状态:
-
常见属性
- in: 触发进入或者退出状态
- className: 动画 class 的名称
- timeout: 过渡动画的时间
- appear: 是否在初次进入添加动画(需要和 in 同时为 true)
- unmountOnExit: 退出后卸载组件
-
钩子函数
- onEnter: 在进入动画之前被触发
- onEntering: 在应用进入动画时被触发
- onEntered: 在应用进入动画结束后被触发
-
基本使用文章来源:https://www.toymoban.com/news/detail-575940.html
import React, { PureComponent } from "react";
import { CSSTransition } from "react-transition-group";
import "./style.css";
export class App extends PureComponent {
constructor() {
super();
this.state = {
isShowTitle: true,
};
}
render() {
const { isShowTitle } = this.state;
return (
<div>
<button
onClick={(e) =>
this.setState({
isShowTitle: !isShowTitle,
})
}
>
change
</button>
<CSSTransition
in={isShowTitle}
classNames="csst"
timeout={2000}
unmountOnExit={true}
appear
onEnter={(e) => console.log("on enter")}
onEntering={(e) => console.log("on entering")}
onEntered={(e) => console.log("on entered")}
onExit={(e) => console.log("on exit")}
onExiting={(e) => console.log("on exiting")}
onExited={(e) => console.log("on exited")}
>
<h2>App</h2>
</CSSTransition>
</div>
);
}
}
export default App;
.csst-apear {
transform: translateX(-150px);
}
.csst-apear-active {
transform: translateX(0);
transition: transform 2s ease;
}
.csst-apear .csst-enter {
opacity: 0;
}
.csst-apear-active .csst-enter-active {
opacity: 1;
transition: opacity 2s ease;
}
.csst-exit {
opacity: 1;
}
.csst-exit-active {
opacity: 0;
transition: opacity 2s ease;
}
SwitchTransition
-
- 常见属性
- mode
- in-out: 新组件先进入,旧组件再移除
- out-in: 旧组件先移除,新组件再进入
-
基本使用文章来源地址https://www.toymoban.com/news/detail-575940.html
import React, { PureComponent } from "react";
import { SwitchTransition, CSSTransition } from "react-transition-group";
import "./style.css";
export class App extends PureComponent {
constructor() {
super();
this.state = {
isLogin: true,
};
}
render() {
const { isLogin } = this.state;
return (
<div>
<SwitchTransition mode="out-in">
<CSSTransition
key={isLogin ? "exit" : "login"}
classNames="login"
timeout={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;
}
TransitionGroup
- 基本使用
import React, { PureComponent } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";
export class App extends PureComponent {
constructor() {
super();
this.state = {
books: [
{ id: 1, name: "book1", price: 123, count: 99 },
{ id: 2, name: "book2", price: 223, count: 99 },
{ id: 3, name: "book3", price: 323, count: 99 },
{ id: 4, name: "book4", price: 423, count: 99 },
{ id: 5, name: "book5", price: 523, count: 99 },
],
};
}
addNewBook() {
const books = [...this.state.books];
books.push({
id: new Date().getTime(),
name: "book6",
price: 111,
count: 99,
});
this.setState({
books,
});
}
delBook(index) {
const books = [...this.state.books];
books.splice(index, 1);
this.setState({
books,
});
}
render() {
const { books } = this.state;
return (
<div>
<h2>书籍列表</h2>
<TransitionGroup component="ul">
{books.map((item, index) => {
return (
<CSSTransition key={item.id} classNames="book" timeout={1000}>
<li>
<span>
{item.name} - {item.price}
</span>
<button onClick={(e) => this.delBook(index)}>删除书籍</button>
</li>
</CSSTransition>
);
})}
</TransitionGroup>
<button onClick={(e) => this.addNewBook()}>添加新书籍</button>
</div>
);
}
}
export default App;
到了这里,关于【前端知识】React 基础巩固(二十九)——过渡动画 react-transition-group的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!