webpack3+anujs+ReactCSSTransitionGroup

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`

然后打开浏览器访问页面

动画生效了！

原文链接：https://www.f2er.com/react/303391.html

webpack3+anujs+ReactCSSTransitionGroup

猜你在找的React相关文章