我们在react中使用动画 如果你不用插件的话
你可以选择使用 transition或者使用keyframes 来做
上面的俩种方法 我不在这里一一赘述 因为今天要说的重点不是这个
我们来讲一讲 react-transition-group 中的动画插件的使用
1.学过vue的同学 可能知道 vue中的动画效果 是用transition 包括标签来实现的
其实吧 很多地点 vue还是借鉴和学习 angular和reaact的
好了废话不多说了 直接上思路和代码了
首选是安装
npm install react-transition-group -S
2.引入和使用
import { CSSTransition } from "react-transition-group"
import "./index.css"
// 这里也需要有一个状态值 进行控制
constructor(props){
super(props);
this.state = {
show:true
}
<div>
// CSSTransition 里面包括一个 div标签 一般是要进行动画的 标签
<CSSTransition
in={this.state.show} // 如果this.state.show从false变为true，则动画入场，反之out出场
timeout={1000} //动画执行1秒
classNames="fade" //自定义的class名
>
<div className="zyc"></div>// 注意 这里不能是一个变量 否则会报错的
</CSSTransition>
<button onClick={this.handleToggole}>切换</button>
</div>
//切换函数
handleToggole=()=> {
this.setState({
show: !this.state.show
})
}
// 然后就是样式文件 index.css
//元素的初始样式
.zyc{
width: 200px;
height: 200px;
}
//enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那
.fade-enter, .fade-appear {
opacity: 0;
background-color: #f00;
margin-left: 300px;
}
//enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行
.fade-enter-active, .fade-appear-active {
opacity: 1;
transition: 1s;
margin-left: 0;
}
//入场动画执行完毕后，保持状态
.fade-enter-done {
opacity: 1;
background-color: #000;
}
//同理，元素 离场前 的瞬间
.fade-exit {
opacity: 1;
background-color: #0f0;
}
// 元素 离开的过程中
.fade-exit-active {
opacity: 0;
transition: 2s;
margin-left: 300px;
background-color: #00f;
}
// 元素 离开的瞬间 要完成的效果
.fade-exit-done {
opacity: 0;
}
这样就会实现 一个简单的动画效果了
3. 还有一种就是群组的效果 有些时候 我们不仅仅要给一个标签添加 效果 要给数组遍历的结果都加上 动画的效果 这个时候就需要我们引入一个新的 对象 TransitionGroup
这下 里面可以包括 变量了 而不是一个标签
// 这里注意了 老版本 可能是 CSSTransitionGroup 这个已经淘汰了
import { CSSTransition,TransitionGroup } from "react-transition-group"
// CSSTransition,TransitionGroup 要搭配使用
```javascript
// 先提前准备好一组数据
constructor(props){
super(props);
this.state = {
list: [
{ id: 1, text: '张三' },
{ id: 2, text: '李四' },
{ id: 3, text: '王麻子' },
{ id: 4, text: '狗蛋' },
]
}
}
render() {
return (
// TansitionGroup 里面包括着 CSSTransition 里面的CSSTransition 不用再写in属性
//因为已经被外边的TransitionGroup 进行管理了 里面的数据删除和添加控制着动画效果
<div>
<TransitionGroup className="todo-list">
{this.state.items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={2000}
classNames="show">
<div className="todo-list-item">
<button
className='cancle'
onClick={() => {
this.setState(state => ({
items: state.items.filter( // es6 过滤数组中的数据
item => item.id !== id // 过滤掉 点击的元素
),
}));
}}>
×
</button>
<span className='item-text'>{text}</span>
</div>
</CSSTransition>
))}
</TransitionGroup>
<button
className='add'
onClick={() => {
const text = prompt('Enter some text');
if (text) {
this.setState(state => ({
// 每输入一个数据 往数组中插入一条数据
items: [
...state.items,
{ id: state.items[state.items.length-1].id+1, text },
],
}));
}
}}>
添加新数据
</button>
</div>
)
}
// index.css
*{
margin: 0;
padding: 0;
}
body{
background-color: #f1f1f1;
}
.show-enter {
opacity: 0.01;
}
.show-enter-active {
opacity: 1;
transition: all 300ms ease-out;
}
.show-exit {
opacity: 1;
}
.show-exit-active {
opacity: 0.01;
transition: all 300ms ease-out;
}
.todo-list {
border-radius: 5px;
box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}
.todo-list-item {
height: 35px;
line-height: 35px;
padding: 0 10px;
border-bottom: 1px solid rgb(202, 202, 202);
}
.todo-list-item:last-of-type {
border-bottom: 0;
}
.item-text {
margin-left: 10px;
}
.cancle {
border: 0;
color: #fff;
background-color: #F04134;
border-radius: 3px;
box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}
.add {
border: 0;
height: 30px;
line-height: 30x;
width: 120px;
margin-top: 15px;
font-size: 14px;
border-radius: 3px;
box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}
好了 讲解 到此 结束 希望能帮到 大家 我也是自我提升一下
我找了很多资料 很多都是 2018年的资料 都知道计算机发展比较迅速 平均三个月更新一次
还是尽量跟上技术的发展 。
生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油 奥利给！
