React动画
一.React实现动画1.React通过setState让界面迅速发生变化,但动画的哲学告诉我们,变化要慢,得用一个逐渐变化的过程来过渡,从而帮助用户理解页面. 二.CSS3 transition1.css3过渡是元素从一种样式逐渐改变为另一种的效果. .ani2 { width: 100px; height: 100px; border: 1px solid #ccc; transition: width 1s,transform 1s; animation: myfirst 3s infinite; &:hover { width: 200px; transform: rotate(360deg); } } 三.css3 animation1.@keyframes用于创建动画,然后捆绑到某个选择器. @keyframes myfirst { 0% { background: #f00; } 50% { background: #0f0; } 100% { background: #ccc; } } .ani2 { width: 100px; height: 100px; border: 1px solid #ccc; transition: width 1s,transform 1s; animation: myfirst 3s infinite; &:hover { width: 200px; transform: rotate(360deg); } } 四.react-addons-css-transition-group插件1.react-addons-transition-group插件,就是在transition和animation两个css属性上实现的. var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 2.将ReactCSSTransition组件添加到render中 淡入淡出实例class TodoList extends Component { constructor(props) { super(props); this.state = { items: ['1111','2222','3333','4444'] }; } handleAdd = () => { var newItems = this.state.items.concat([prompt('enter some text')]); this.setState({ items: newItems }); } handleRemove = (i) => { var newItems = this.state.items.slice(); newItems.splice(i,1); this.setState({ items: newItems }); } render() { return ( <div> <button onClick={ this.handleAdd }>Add Item</button> <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={ 500 } transitionLeaveTimeout={ 300 } > { this.state.items.map((item,i) => { return ( <div key={ i } onClick={ this.handleRemove.bind(this,i) }> { item } </div> ) }) } </ReactCSSTransitionGroup> </div> ); } } .example-enter { opacity: 0.01; } .example-enter.example-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .example-leave { opacity: 1; } .example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; } 轮播图实例class ImageCarousel extends Component { constructor(props) { super(props); this.state = { a: [ 'https://s1.sonkwo.com/FhXx9C5gqykP4UUJHPKfpS1cexVP','http://7fvk4m.com1.z0.glb.clouddn.com/Fjn9lT9RdzW1dpIJ_7vSrxB4UKNB','http://7fvk4m.com1.z0.glb.clouddn.com/FsDTCVnB9DYkWF-m0p7zNdVfadTg' ],current: 0 }; } componentDidMount() { setInterval(() => { let current = this.state.current; current++; if (current > this.state.a.length - 1) { current = 0; } this.setState({ current }); },5000); } render() { let { a,current } = this.state; return ( <div className="react-slide"> <ReactCSSTransitionGroup component={'li'} transitionName="carousel" transitionEnterTimeout={ 1000 } transitionLeaveTimeout={ 1000 } > <img src={ a[current] } key={ a[current] } /> </ReactCSSTransitionGroup> </div> ); } } .react-slide { li { width: 440px; height: 260px; overflow: hidden; } .carousel-enter { opacity: 0.01; } .carousel-enter.carousel-enter-active { opacity: 1; transition: opacity 1s ease-in-out; } .carousel-leave { opacity: 1; } .carousel-leave.carousel-leave-active { opacity: 0.01; transition: opacity 1s ease-in-out; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |