P25:React高级-CSS3实现react动画

前端的动画技术发展到现在,完全可以独立出一个岗位。我目前不属于动画岗,能力有限,也只是简单的给小伙伴们讲讲,做一些前端常用的效果。本文先用我们最熟悉的CSS3在React中制作一个显示隐藏的动画特效,注意这是用CSS3实现的,其实React只做了业务逻辑。

新建一个Boss组件

需要给“美女服务菜单”增加一个Boss服务人物,点击一下按钮就会自动出现”Boss级人物-孙悟空”,不要管什么恰当不恰当了,咱们是为了练习一下动画。在src文件夹下,新建一个Boss.js文件。然后用快速生成的方式生成基本结构:

在使用这些命令前,你要保证你安装了VSCode中的Simple React Snippets插件。

  • 先输入 imrc,然后回车,这是为了用import引入Reactcomponent
  • 再输入 ccc 然后回车,生成最基本的带constructor的代码结构。

就会生成下面的基本代码了(2秒钟完成下面的代码,这也是你工作中提高效率的关键):

import React, { Component } from 'react';
class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  );
    }
}

export default Boss;

然后我们先写一些JSX代码,让页面上有一段文字和一个按钮。代码如下:

import React, { Component } from 'react';
class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                <div>BOSS级人物-孙悟空</div>
                <div><button>召唤Boss</button></div>
            </div>
          );
    }
}

export default Boss;

编写业务逻辑

目前组件没有任何业务逻辑,只有一个UI,这是没办法实现动画效果的。业务逻辑是点击按钮的时候可以改变字的’显示隐藏’。 要实现这个业务逻辑,先在constructor里增加state值isShow,详情请看下面的代码。

this.state = { 
    isShow:true
}

然后把“BOSS级人物-孙悟空”的部分,增加className,并用isShow进行控制。

<div className={this.state.isShow ? 'show' : 'hide'}>BOSS级人物-孙悟空</div>

需要点击按钮时,有响应的事件,所以需要一个方法,我们编写一个toToggole()方法,代码如下:

toToggole(){
    this.setState({
        isShow:this.state.isShow ? false : true
    })
}

意思就是当isShowtrue时,我们赋值false;当isShowfalse时,我们赋值true`.

有了方法后,可以给<button>加上onClick响应事件了,代码如下:

<div><button onClick={this.toToggole}>召唤Boss</button></div>

写完这个事件,还是需要到constructor里绑定一下this。代码如下:

constructor(props) {
    super(props);
    this.state = { 
        isShow:true
    }
    this.toToggole = this.toToggole.bind(this);
}

这样我们的基本业务逻辑就算写完了,可以把代码加入到Meinv组件中,看一下效果了。

加入CSS动画

在页面上看不出任何的效果,如果你打开浏览器控制台是可以看到每次点击按钮,class都会变化的。界面没变化,知识我们没有写CSS。现在可以在style.css里写样式,代码如下:

.show{ opacity: 1; transition:all 1.5s ease-in;}
.hide{opacity: 0; transition:all 1.5s ease-in;}

这样就用CSS3实现了React中动画,如下图

React高级-CSS3实现react动画

这知识最简单的实践动画,所以先不要吐槽,接下来我们会继续讲解React中动画的知识。继续跟着码云笔记一起学习吧。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P25:React高级-CSS3实现react动画

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们