demo做前端免不了要做活动转盘, 以下是个react的转盘动画例子
指针旋转
- 让针转起来,这个操作比较简单,直接给指针设置一个新的角度,配合css 的 transition 属性设置过度时间即可。
// App.js
const startStyle = {transform:`rotate(${this.state.rotate}deg)`};
....
<img
src={require('./images/start.png')}
alt="pointer"
className={'start'}
style={startStyle}
onClick={this.handleClick}
/>
// App.css
.App .start{
transition:1000ms;
}
这种直接设置属性的方式,比较适合一直存在页面的元素。
组件加/卸载时的动画
- 在组件经历mount,和unmount生命周期的时候也可以设置动画,这里设置了
开奖号码:##
加载和卸载时候的动画。 - 这里使用了react官方建议的组件react-transition-group
//App.js
<CSSTransition
// 组件名,提供css选择器使用,必填参数,如果缺少了,程序会崩溃报错,注意这个参数带's'
classNames='animation'
// 组件是否展示,true为显示
in={this.state.enable}
// 动画持续时间,需要和css的设置保持一致
timeout={300}
// 当in的属性变为false之后,卸载组件,过程可设置动画
unmountOnExit
>
{/*CSSTransition的子组件,必须是个函数,或者组件*/}
<div className={'result-content'}>
开奖号码: {this.state.number}
</div>
</CSSTransition>
// App.css
/*组件入场前的状态*/
.animation-enter{
transform:translateY(-20px);
opacity:0;
}
/*组件正在入场时候的动画, all 指的是所有属性一起变化,ease-in-out 先快后慢的一种时间线*/
.animation-enter-active{
transform:translateY(0);
opacity:1;
transition:all 300ms ease-in-out;
}
/*组件出场前的动画*/
.animation-exit {
opacity: 1;
}
/*组件正在出场的动画*/
.animation-exit-active {
opacity:0;
transform:translateY(20px);
transition:all 300ms ease-out;
}
这种方式比较适合某些动态展示组件的过渡动画。
列表信息变化动画
- 列表信息动画,也是使用react-transition-group
- 这里设置了列表新增元素和移除元素时的动画。
// App.js
{/*TransitionGroup组件可以管理一套CSSTransition,会动态给每个组件设置in属性*/}
<TransitionGroup className={'list'}>
{
this.state.list.map(({item, id})=>(
<CSSTransition
key={id}
timeout={500}
classNames={'item-animated'}
// 点击元素卸载元素
onClick={this.handleRemove.bind(null,id)}
>
<p className={'item'}>{item}</p>
</CSSTransition>
))
}
</TransitionGroup>
// App.css
.item-animated-enter{
height: 0;
opacity: 0;
transform: translateX(-20%);
}
/*transition属性可以单独设置多个属性的动画状态,构成一个组合动画,第一个属性是 变化的属性名称,
有两个时间的话,第一个时间是动画的延时,第二个时间是动画持续时间。最后一个是时间线参数,
以下动画就组合成先200ms改变高度,再300ms发生右边位移*/
.item-animated-enter-active {
opacity: 1;
height: 30px;
transform: translateX(0);
transition:height 200ms, opacity 200ms 300ms, transform 200ms 300ms ease-in-out;
}
.item-animated-exit{
opacity: 1;
height: 30px;
transform: translateX(0);
}
.item-animated-exit-active{
opacity:0;
height:0;
transform: translateX(20%);
transition: opacity 300ms, transform 300ms ease-in-out, height 300ms 200ms;
}
参考文档
- https://reactcommunity.org/react-transition-group/
- https://www.w3schools.com/css/css3_transitions.asp
兼容低端浏览器
- 不兼容,爱咋咋地吧。
网友评论