首先，我們要?jiǎng)?chuàng)建兩個(gè) input 要用到的 class

.input {
  width: 150px;
  padding: 10px;
  font-size: 20px;
  border: none;
  border-radius: 4px;
  background-color: #ffffdffffd;
  transition: width .35s linear;
  outline: none;
}

.input-focused {
  width: 240px;
}

一個(gè)是它原始的樣式，一個(gè)是它 focus 后的樣式

下面，我們就開始書寫我們的 React 組件

在此，推薦一個(gè) 在線的 React VS Code IDE，真的很強(qiáng)大，讀者不想構(gòu)建自己的 React app，可以在其中檢驗(yàn)以下代碼的正確性

class App extends Component {
  state = {
    focused: false,
  }

  componentDidMount() {
    this._input.addEventListener("focus", this.focus);
    this._input.addEventListener("blur", this.focus);
  }

  focus = () => {
    this.setState(prevState => ({
      focused: !prevState.focused,
    }));
  }

  render() {
    return (
      

        

           this._input = input}
            className={["input", this.state.focused && "input-focused"].join(" ")}
          />
        
      
    );
  }
}

我們有一個(gè) focused 的 state，初始值為 false，我們通過更新該值來創(chuàng)建我們的動(dòng)畫

在 componentDidMount 中，我們添加兩個(gè)監(jiān)聽器，一個(gè) focus，一個(gè) blur，指定的回調(diào)函數(shù)都是 focus

focus 方法會(huì)獲取之前 focused 的值，并負(fù)責(zé)切換該值

在 render 中，我們通過 state 來改變 input 的 classNames，從而實(shí)現(xiàn)我們的動(dòng)畫

JavaScipt styles 跟 CSS 中的 classes 類似，在 JS 文件中，我們就可以擁有所有邏輯

贊同者：跟 CSS 動(dòng)畫 一樣，且它的表現(xiàn)更加清晰。它也不失為一個(gè)好方法，可以不必依賴任何 CSS

反對(duì)者：跟 CSS 動(dòng)畫 一樣，也是不跨平臺(tái)的，且動(dòng)畫一旦復(fù)雜，也難以控制

在下面的實(shí)例中，我們將創(chuàng)建一個(gè) input，當(dāng)用戶輸入時(shí)，我們將一個(gè) button 從 disable 轉(zhuǎn)變?yōu)?enable

class App extends Component {
  state = {
    disabled: true,
  }

  onChange = (e) => {
    const length = e.target.value.length;

    if (length > 0) {
      this.setState({ disabled: false });
    } else {
      this.setState({ disabled: true });
    }
  }
  render() {
    const { disabled } = this.state;
    const label = disabled ? "Disabled" : "Submit";

    return (
      

        
        
          {label}
        
      
    );
  }
}


const styles = {
  App: {
    display: "flex",
    justifyContent: "left",
  },
  input: {
    marginRight: 10,
    padding: 10,
    width: 190,
    fontSize: 20,
    border: "none",
    backgroundColor: "#ffffd",
    outline: "none",
  },
  button: {
    width: 90,
    height: 43,
    fontSize: 17,
    border: "none",
    borderRadius: 4,
    transition: ".25s all",
    cursor: "pointer",
  },
  buttonEnabled: {
    width: 120,
    backgroundColor: "#ffc107",
  }
}

我們有一個(gè) disabled 的 state，初始值為 true

onChange 方法會(huì)獲取用戶的輸入，當(dāng)輸入非空時(shí)，就切換 disabled 的值

根據(jù) disabled 的值，確定是否將 buttonEnabled 添加到 button 中

React Motion 是 Cheng Lou 書寫的一個(gè)非常不錯(cuò)的開源項(xiàng)目。它的思想是你可以對(duì)Motion 組件 進(jìn)行簡(jiǎn)單的樣式設(shè)置，然后你就可以在回調(diào)函數(shù)中通過這些值，享受動(dòng)畫帶來的樂趣

對(duì)于絕大多數(shù)的動(dòng)畫組件，我們往往不希望對(duì)動(dòng)畫屬性（寬高、顏色等）的變化時(shí)間做硬編碼處理，react-motion 提供的 spring 函數(shù)就是用來解決這一需求的，它可以逼真地模仿真實(shí)的物理效果，也就是我們常見的各類緩動(dòng)效果

下面是一個(gè)森破的示例

  {
    ({ x }) =>
      

  }

這是官方提供的幾個(gè) demo，真的可以是不看不知道，一看嚇一跳

Chat Heads

Draggable Balls

TodoMVC List Transition

Water Ripples

Draggable List

贊同者：React Motion 可以在 React Web 中使用，也可以在 React Native 中使用，因?yàn)樗强缙脚_(tái)的。其中的 spring 概念最開始對(duì)我來說感覺挺陌生，然而上手之后，發(fā)現(xiàn)它真的很神奇，并且，它有很詳細(xì)的 API

反對(duì)者：在某些情況下，他不如純 CSS / JS 動(dòng)畫，雖然它有不錯(cuò)的 API，容易上手，但也需要學(xué)習(xí)成本

為了使用它，首先我們要用 yarn 或 npm 安裝它

yarn add react-motion

在下面的實(shí)例中，我們將創(chuàng)建一個(gè) dropdown 菜單，當(dāng)點(diǎn)擊按鈕時(shí)，下拉菜單友好展開

class App extends Component {
  state = {
    height: 38,
  }

  animate = () => {
    this.setState((state) => ({ height: state.height === 233 ? 38 : 233 }));
  }

  render() {
    return (
      

        
Animate
        
          {
            ({ height }) =>
            

              
Selection 1
              
Selection 2
              
Selection 3
              
Selection 4
              
Selection 5
              
Selection 6
            
          }
        
      
    );
  }
}

const styles = {
  menu: {
    marginTop: 20,
    width: 300,
    border: "2px solid #ffffd",
    overflow: "hidden",
  },
  button: {
    display: "flex",
    width: 200,
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    border: "none",
    borderRadius: 4,
    backgroundColor: "#ffc107",
    cursor: "pointer",
  },
  selection: {
    margin: 0,
    padding: 10,
    borderBottom: "1px solid #ededed",
  },
}

我們從 react-motion 中 import Motion 和 spring

我們有一個(gè) height 的 state，初始值為 38，代表 menu 的高度

animate 方法設(shè)置 menu 的 height，如果 原 height 為 38，則設(shè)置 新 height 為 233，如果 原 height 為 233，則設(shè)置 新 height 為 38

在 render 中，我們使用 Motion 組件 包裝整個(gè) p 標(biāo)簽 列表，將 this.state.height 的當(dāng)前值設(shè)為組件的 height，然后在組件的回調(diào)函數(shù)中使用該值作為整個(gè)下拉的高度

當(dāng)按鈕被點(diǎn)擊時(shí)，我們通過 this.animate 切換下拉的高度

Animated 是基于 React Native 使用的同一個(gè)動(dòng)畫庫建立起來的

它背后的思想是創(chuàng)建聲明式動(dòng)畫，通過傳遞配置對(duì)象來控制動(dòng)畫

贊同者：跨平臺(tái)，它在 React Native 中已經(jīng)非常穩(wěn)定，如果你在 React Native 中使用過，那么你將不用再重復(fù)學(xué)習(xí)。其中的 interpolate 是一個(gè)神奇的插值函數(shù)，我們將在下面看到

反對(duì)者：基于 Twitter 的交流，它目前貌似不是 100% 的穩(wěn)定，在老的瀏覽器中的，存在前綴和性能的問題，而且，它也有學(xué)習(xí)成本

為了使用 Animated，我們首先還是要用 yarn 或 npm 安裝它

yarn add animated

在下面的實(shí)例中，我們將模擬在提交表單成功后顯示的動(dòng)畫 message

import Animated from "animated/lib/targets/react-dom";
import Easing from "animated/lib/Easing";

class AnimatedApp extends Component {
  animatedValue = new Animated.Value(0);

  animate = () => {
    this.animatedValue.setValue(0);

    Animated.timing(
      this.animatedValue,
      {
        toValue: 1,
        duration: 1000,
        easing: Easing.elastic(1),
      }
    ).start();
  }

  render() {
    const marginLeft = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [-120, 0],
    });

    return (
      

          
Animate
          
            
Thanks for your submission!
          
      
    );
  }
}

const styles = {
  button: {
    display: "flex",
    width: 125,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    border: "none",
    borderRadius: 4,
    backgroundColor: "#ffc107",
    cursor: "pointer",
  },
  box: {
    display: "inline-block",
    marginTop: 10,
    padding: "0.6rem 2rem",
    fontSize:"0.8rem",
    border: "1px #eee solid",
    borderRadius: 4,
    boxShadow: "0 2px 8px rgba(0,0,0,.2)",
  },
}

從 animated 中 import Animated 和 Easing

用 new Animated.Value(0) 創(chuàng)建一個(gè)值為 0 的類屬性 - animatedValue

創(chuàng)建 animate 方法，處理所有的動(dòng)畫，首先通過 this.animatedValue.setValue(0) 初始化動(dòng)畫值，實(shí)現(xiàn)的效果就是每次重新執(zhí)行該動(dòng)畫，然后調(diào)用 Animated.timing，animatedValue 作為第一個(gè)參數(shù)傳遞，配置對(duì)象 作為第二個(gè)參數(shù)，一個(gè)設(shè)置最終動(dòng)畫值，一個(gè)設(shè)置持續(xù)時(shí)間，一個(gè)設(shè)置緩動(dòng)效果

在 render 中，我們用 interpolate 方法創(chuàng)建 marginLeft 對(duì)象，包含 inputRange 和 outputRange 數(shù)組，我們使用此對(duì)象作為 UI 中 message 的 style 屬性

我們使用 Animated.div 替代默認(rèn)的 div

我們將 animatedValue 和 marginLeft 作為 Animated.div 的 style 屬性

Velocity React 是基于已經(jīng)存在的 Velocity 建立起來的

贊同者：上手容易，API 簡(jiǎn)單明了，相對(duì)其他庫更易于掌握

反對(duì)者：有些不得不克服的問題，比如 componentDidMount 后動(dòng)畫并沒有真正地起作用等，而且，它不跨平臺(tái)

下面是一個(gè)森破的示例

首先還是要用 yarn 或 npm 安裝它

yarn add velocity-react

在下面的實(shí)例中，我們將創(chuàng)建一個(gè)很酷的動(dòng)畫輸入

import { VelocityComponent } from "velocity-react";

const VelocityLetter = ({ letter }) => (
  
    
{letter}
  
)

class VelocityApp extends Component {
  state = {
    letters: [],
  }

  onChange = (e) => {
    const letters = e.target.value.split("");
    const arr = [];

    letters.forEach((l, i) => {
      arr.push()
    });
    this.setState({ letters: arr });
  }

  render() {
    return (
      

        

          
          

            {
              this.state.letters
            }
          
        
      
    );
  }
}

const styles = {
  input: {
    marginBottom: 20,
    padding: 8,
    width: 200,
    height: 40,
    fontSize: 22,
    backgroundColor: "#ffffd",
    border: "none",
    outline: "none",
  },
  letters: {
    display: "flex",
    height: 140,
  },
  letter: {
    marginTop: 100,
    fontSize: 22,
    whiteSpace: "pre",
    opacity: 0,
  }
}

從 velocity-react 中 import VelocityComponent

我們要?jiǎng)?chuàng)建一個(gè)可重復(fù)使用的組件來滿足每個(gè) letter 的動(dòng)畫

在這個(gè)組件中，我們將 animation 的 opacity 設(shè)為 1，marginTop 設(shè)為 0，這些值代表著傳入子組件的重寫值，即當(dāng)組件被創(chuàng)建時(shí)，組件的 opacity 會(huì)由初始的 0 變?yōu)?1，marginTop 會(huì)由初始的 100 變?yōu)?0，我們還設(shè)置了 500 ms 的持續(xù)時(shí)間，最后值得一提的是 runOnMount 屬性，它的意思是在組件 掛載 或 創(chuàng)建 完后執(zhí)行該動(dòng)畫

其中的 onChange 方法會(huì)獲取用戶的每次輸入，并創(chuàng)建一個(gè)由 VelocityLetter 組成的新數(shù)組

在 render 中，我們就使用該數(shù)組在 UI 中渲染 letters

總的來說，基本的動(dòng)畫，我會(huì)選擇 JS style，復(fù)雜的動(dòng)畫，我更偏向 React Motion。而對(duì)于 React Native，我還是堅(jiān)持使用 Animated，一旦 Animated 成熟，在 Web 中可能也會(huì)投入使用，目前，我真的很享受 React Motion

原文鏈接: React Animations in Depth (Nader Dabit)