webpack3+anujs+ReactCSSTransitionGroup

2019年9月19日 69次阅读 来源: 司徒正美

webpack3出来好久，决定试用一下。

mkdir eee
cd eee
npm init -y
npm i anujs react-addons-css-transition-group --save
npm i babel-core babel-loader babel-preset-es2015 babel-preset-react webpack@3.0 --save-dev

最后生成的package.json应该是这样

{
  "name": "eee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "anujs": "^1.0.6",
    "react-addons-css-transition-group": "^15.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "webpack": "^3.0.0"
  }
}

我们用到babel，需要用.babelrc

 {
     "presets": [
         ["es2015",{ "modules": false }], "react"
     ],
    
     "plugins": [
         [
             "transform-es2015-classes", {
                 "loose": true
             }
         ]
     ]
 }

根目录创建main.js,用法一切如React

import React from "react";
import ReactDOM from "react-dom";
import ReactCSSTransitionGroup from "react-addons-css-transition-group"

var data = ["one", "two", "three"];
class Control extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: data.splice(0,data.length)
    };
    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addItem() {
    var a = data.pop()
  
    var newItems = this.state.items.concat(a || "add"+ (new Date-0));
    this.setState({
      items: newItems
    });
  }
  removeItem(i) {
    var newItems = this.state.items;
    var drop = newItems.splice(i, 1)
    if(drop.length){
       [].push.apply(data, drop)
    }
    this.setState({
      items: newItems
    });
  }
  render() {
    var $this = this;
    var List = this.state.items.map(function(value, index) {
      return (
        <div key={value} onClick={$this.removeItem.bind($this, index)}>
          {" "}{value}
        </div>
      );
    });
    return (
      <div>
        <button onClick={this.addItem}>add Item</button>
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {List}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}
class Hello extends React.Component {
  render() {
    return (
      <div>
        {` 测试anujs与React动画组件的兼容 `}
      
          <Control data={data}/> 
       
      </div>
    );
  }
}

window.onload = function() {
  ReactDOM.render(<Hello />, document.body);
};

然后创建index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>anujs</title>
    <style>
        .example-enter {
            opacity: 0.01;
        }

        .example-enter.example-enter-active {
            opacity: 1;
            transition: opacity 500ms ease-in;
        }

        .example-leave {
            opacity: 1;
        }

        .example-leave.example-leave-active {
            opacity: 0.01;
            transition: opacity 300ms ease-in;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <script src='./dist/index.js'></script>


</head>

<body>
</body>

</html>

最后的魔术由webpack完成，建立webpack.config.js

const path = require("path");
const webpack = require("webpack");
module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  resolve: {
    alias: {
      react: "anujs",
      "react-dom": "anujs"
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
}

然后控制台下输入｀webpack –config webpack.config`

《webpack3+anujs+ReactCSSTransitionGroup》

然后打开浏览器访问页面

《webpack3+anujs+ReactCSSTransitionGroup》

动画生效了！

    原文作者：司徒正美
    原文地址: https://segmentfault.com/a/1190000010381233
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞