簡書項目(一,頭部組件,阿里圖標,過渡動畫)

創建初始項目

同時爲了項目規範,pc端禁止使用頁面緩存

  <!-- 禁止頁面緩存 -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
   <!-- 禁止頁面緩存 -->

styled-components的使用

發現在index.css寫一個類名,在子文件App.js裏引用這個類名也會生效,這樣樣式會有全局污染,所以我們採用styled-components來規範樣式
1.安裝styled-components

yarn add styled-components

2.使用
css文件變爲js文件


效果:

引入PC各個瀏覽器的統一基礎樣式

網址:http://meyerweb.com/eric/tools/css/reset/

將裏面的css放入一個reset.css文件中,在主頁中引入即可

頭部組件開發

1.簡書logo的製作:

小技巧:
上面使用了動態渲染路徑;
background-size的contain特定值會保持圖像本身的寬高比例，將圖片縮放到寬度或高度正好適應定義背景的區域;
上面的"/"路徑也可以去掉,寫成下面這樣

2.標題中間部分的製作

小技巧:
使用className屬性定義類名,在js樣式中使用$.屬性名來快速取值;
裏面placeholder顏色的修改:

3.右邊註冊寫文章的製作

最終頭部組件效果:

過程使用了styled-components插件來完成樣式佈局,建議在react項目中使用.

搜索框的過渡動畫

方法:不要用獲取焦點的dom操作,要用數據驅動思想來實現,設置一個狀態,在onFocus(獲焦)和onBlur(失焦)事件裏改變狀態的值即可實現不同的效果.


同時增加動畫:react-transiton-group
github官網https://reactcommunity.org/react-transition-group/css-transition
安裝

yarn add react-transition-group

使用:


最終效果: