从零开始项目02

使用iconfont.cn

1. 输入网址，创建账号，资源管理，我的项目，创建项目OK
2. 寻找想要的icon图标，然后加入购物车
3. 最后打开购物车，添加至项目，选中，确定。跳转到项目，下载到本地
4. 解压，其中的HTML文件是说明文件
5. 打开工程目录的src文件下的statics，新建文件夹命名为iconfont
6. 解压缩的文件中删除demo.js/css/html，保留iconfont相关文件，剪切到statics下的iconfont中

五个文件分别为eto,ttf,woff,icon.css,svg，第一次下载的时候，没有。回到网站，点击项目编辑重新下载

7. 打开iconfont中的iconfont.css文件，修改内容
8. 将iconfont.css修改为iconfont.js文件，以便将他改造为全局文件
9. 仿照style.js代码将iconfont.js改造为全局CSS样式（借助），命名为GlobalFont

//iconfont.js最终的代码
import { createGlobalStyle } from "styled-components";
export const GlobalFont=createGlobalStyle `
  @font-face {
    font-family: "iconfont"; /* Project id 3370403 */
    src: url('./iconfont.eot?t=1651368900158'); /* IE9 */
    src: url('./iconfont.eot?t=1651368900158#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATUAAsAAAAACVgAAASIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqFYIUmATYCJAMUCwwABCAFhGcHTRtNCFGUKU5M9qMwbk+ekyzsLEzW93O+k+gnTTFtCNHQ5X61ZU43px/To7A4VBUOIVHgLA4l0NuI7ru33VrwPCpC3ZLMrabP9ae9/s6XhqVx6pRCSBwWozjKq6oHh2QWYDIrMFqYlxxg5OSX8j/383nlbwJ3DQD3LSOsbDjbmdiAMn4X4W9Q++5/iV0RJ5X3xn0Ehhw51Lq5vH9qbPdRYmNHB+oPbHX0rcHGIDUpC8zQ1TboziLeVNJLuoxX+f7x7yQGJDVDF7p7vKgaLzwugjgg5yUeyD9B2F+TP1sGKAE54HJmFvS07KoHuU65QDY0lVC4AKh/15WkLxBVop84IEnAk12bZgj/wwNIlhRQA6RSBYyItAIRqAAgRJUAyBH9BECGOCB5d1TKYD4G4MAHAPTgMeyviRRJuRw2zAC3MjAwGa7Zto7wX2dkPV9//mZ9di2KXk2uPn/+tuNeP3aR2T2WvRd9POP4bcqFOk51pyy6583OM5q7bNc9RMQvuf0c1loYo6KwOjwnd64lttiYKzmETwLAAjuOTbyKBJYV5DFD6N3rgd/gk04h1KfPHPPehQTmLiYmUrcJnr4zGp+UfCmc1qezewX2nqecNFTyC8rbEGPJRN40aQD+qIreLcUxGTsmsfdmyB2S8Z+fv3riUeHYpCM8s/b84e0mFLvm0rFdpuysjk6m1vf2TSpo/uJtN5912BVru5e4aiVGwi17M/cU8a9rqnNSylgiNvSU1dqaOb7cwqLlBWS0vCnXNH2sQ1ayXUyEiXNtfF9Od3VLI9fg7420Ggz7zYTbcLwy/gYZc6NCUyqNvlsblsbIokprwu4p/hy2tZ8JcEfKSLcmNVOjUYAnRwS9LmTbL5kY/DF1+O5gCUfP1z+pqFhaUxdZ6Jbhmprqmu52mHCmubqkumccQqFIGxy7MHLfnPcVFY93bKd9Z3zLVscRsbFkvHpt4I8hydhGvs5HgaYxnlwD8epYkuiPBsm/qzK4LDCwLLjyS4ghhuhqv+TH7eKilvf1LY9SjtpfXUjkOU6Z4phHFF4nKNCgO7iQuD6RCie03ADPc5u7w6vLzqzk/v0SdWzoBgAAic8VcgEAQP4hByBx/zF5hIQcIxRoajcCEC/P49OKtEJ+D8Nf2ujTWbNjpAymgr+JGlj0pwrkK2CAeimiJgNN+QCa6KyBpEigunUAT+Kv0/Qv8k353Y96+igiruh2xAkkHcuQda1QCmMHqmEn0HSdwpBdF/uHTcvaovSw4cuDMGEDyZh3yCZ8UwrjB6o5f9BM+Ich96FxvGEboc6YUKiC1SdYlaImWpHDPpB59chj8RfiYv0oLNw8+tkrisS7WFPezFJEg+YU4DK+GHmfIHOqScl0LZJ3Z+6VU28yVSk0zjCCBKmAlU/AUpJI8+7S/XwPiPHKQwykvDhYCYXB8GBhag6gXKkiqO2ZjC/eGEtC6HCexpIAXNYO4nEqAXl6Wo0oYmq9RSLbNQu6aahqenxNeIHFP+WO6Pg1UuQoUaPpPKdoPjG2InFUKeKmwtpGiv6NLMpYSqMB') format('woff2'),
        url('./iconfont.woff?t=1651368900158') format('woff'),
        url('./iconfont.ttf?t=1651368900158') format('truetype'),
        url('./iconfont.svg?t=1651368900158#iconfont') format('svg');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
`;

10. 在全局index.js文件中引入：import "./statics/iconfont/iconfont.js"
11. 在App.js中引入

import React, { Component } from "react";
import { Globalstyle } from "./style.js";
import { GlobalFont } from "./statics/iconfont/iconfont.js";
import Header from "./common/header/index.js";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Globalstyle></Globalstyle>
        <GlobalFont/>
         <Header/>
      </div>
    );
  }
}
export default App;

11. 在header组件中使用，采用unicode的方式

 <Navitem className="right">
  <span className="iconfont">&#xe636;</span>  Aa那个
 </Navitem>
<Button className="writting">
	  <span className="iconfont">&#xe600;</span>
	  写文章
</Button>

12. 效果图
    

搜索框添加动画效果

组件式开发，不希望直接在标签上添加函数，而是需要拿状态，根据状态来确定
这里借助state

    constructor(props) {
        super(props);
        this.state = {
            focused:false
        }
    }
    render(){
		return(
			 <SearchWrapper>
                <NavSearch
                    className={this.state.focused?"focused":""}
                ></NavSearch>
                <span className={this.state.focused?"focused iconfont":"iconfont"}>&#xe60c;</span>
            </SearchWrapper>
		)
	}

style.js中的样式：

export const NavSearch = styled.input.attrs({
    placeholder: '输入搜索内容'
})`
    width:240px;
    height:38px;
    padding:0 30px 0 20px;
    margin-top:9px;
    margin-left:14px;
    box-sizing:border-box;
    border:none;
    outline:none;
    border-radius:19px;
    background:#eee;
    font-size:14px;
    color:#666;
    &:placeholder{
        color:#999;
    }
    &.focused{
        width:360px;
    }

`;
export const SearchWrapper = styled.div`
    float:left;
    position:relative;
    .iconfont{
        position:absolute;
        right:5px;
        bottom:5px;
        width:30px;
        border-radius:15px;
        line-height:30px;
        text-align:center;
        &.focused{
            background:#777;
            color:#fff;
        }
    }
`;

接下来就是用函数，操纵focused的逻辑

class Header extends Component{
    constructor(props) {
        super(props);
        this.state = {
            focused:false
        }
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
    }
    render() {
        return (
            <HeaderWrapper>
                <Logo href="/" />
                <Nav>            
        			 ......
                    <SearchWrapper>
                        <NavSearch
                            className={this.state.focused ? "focused" : ""}
                            onFocus={this.handleFocus}
                            onBlur={this.handleBlur}
                        ></NavSearch>
                        <span className={this.state.focused?"focused iconfont":"iconfont"}>&#xe60c;</span>
                    </SearchWrapper>
                    ......
            </HeaderWrapper >
        )
    }
    handleBlur(){
        this.setState({
            focused: false
        })
    }
    handleFocus() {
        this.setState({
            focused: true
        })
    }
}

引入react-transition-group

github了解链接：点击https://github.com/reactjs/react-transition-group中的Main documentation查看https://reactcommunity.org/react-transition-group/并使用了CSSTransition的组件

import { CSSTransition } from "react-transition-group";
。。。
<SearchWrapper>
	<CSSTransition
         in={this.state.focused}
         timeout={200}
         classNames="slide"
     >
         <NavSearch
             className={this.state.focused ? "focused" : ""}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
         ></NavSearch>
     </CSSTransition>
     <span className={this.state.focused?"focused iconfont":"iconfont"}>&#xe60c;</span>
 </SearchWrapper>

SearchWrapper中添加以下样式代码
   .slide-enter {
        transition:all 200ms ease-out;
    }
    .slide-enter-active {
        width:360px;
    }
    .slide-exit {
        transition:all 200ms ease-out;
    }
    .slide-exit-active {
        width:240px;
    }

或者在navSearch内添加，但因为是同级别的，需要加&，二者效果一样

   &.slide-enter {
        transition:all 200ms ease-out;
    }
    &.slide-enter-active {
        width:360px;
    }
    &.slide-exit {
        transition:all 200ms ease-out;
    }
    &.slide-exit-active {
        width:240px;
    }