JosephT5566 / my-resume

My resume

https://JosephT5566.github.io/my-resume

How to build a React-app to github homepage

1. npx create-react-app app-name
2. cd app-name
3. npm start
4. git init
5. git remote add origin https://JosephT5566.github.io/app-name
6. npm install gh-pages --save-dev
7. 在package.json中的script新增

    "scripts": {
    ...
    "predeploy": "npm run build", // bundles React in production mode
    "deploy": "gh-pages -d build" // do gh-pages things
    }

8. 在package.json中新增 "homepage": "https://JosephT5566.github.io/app-name"
9. npm run deploy 可以在github的branch看到新的分支 gh-pages

How to use CSSTransition

CSSTransition

Improve your UI with React Transition Group: A guide with examples

Installation

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

Import

import CSSTransition from 'react-transition-group'

Use

使用component CSSTransition時，有幾個主要的props要設定

• in: boolean，控制element是否出現
• timeout: 進入或離開DOM所需的毫秒數
• unmountOnExit: 元素消失時，實際上將完全離開DOM

其餘請參照官方敘述

example:

<CSSTransition
  in={this.state.example}
  timeout={300}
  classNames='example'
  unmountOnExit
>

設定對應的CSS，使用上是在給定的class name加上後綴，enter, enter-active, exit, 和 exit-active

• example-enter: 當props in設為true時，element會接收到此CSS
• example-enter-active: CSS example-enter執行完就會接著新增此CSS，在此設定轉換的行為
• example-exit: 當props in設為false時，element會接收到此CSS
• example-exit-active: CSS example-exit執行完就會接著新增此CSS，在此設定轉換的行為

example:

.cardTransition-enter {
    height: 0px;
}

.cardTransition-enter-active {
    height: 100px;
    transform: translateY(0%);
    transition: all 300ms ease;
}

.cardTransition-exit {
    height: 100px;
}

.cardTransition-exit-active {
    height: 0px;
    transform: translateY(0%);
    transition: all 300ms ease;
}

*-active class代表想要用怎樣的動畫來表現，所以宣告出transition是很重要的，否則就不會出現想要的轉換效果。

How to get the height of hidden element, and set to animation CSS

在網路上找到一篇文章提到解法

底下留言則提出了另一種方法: 利用ReactDOM.render()與Promise，先將要測試的hidden element append到一實體DOM上，再去獲取相關值，用非同步方式回傳

example:

measureElement(
    <div style={ {width: '100px', height: '50px'} }></div>,
    id
).then( ({width, height, id}) => { console.log(width); } )

// console: 50

但如何將獲取到的值(width)，回去設定到CSSTransition動畫的CSS參數中呢...