react+TweenMax实现圆球滚动开关效果代码

代码语言:html

所属分类:表单美化

代码描述:react+TweenMax实现圆球滚动开关效果代码

代码标签: react TweenMax 圆球 滚动 开关

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      background-color:#FFFCF9;
      text-align:center;
    }
    
    body,
    html {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    
    svg{
      width:100%;
      height:100%;
     
    }
    #app{
      width:100%;
      height:100%;
     
    }
    
    .hit{
     cursor:pointer;
     -webkit-tap-highlight-color:transparent;
    }
    </style>
</head>

<body>

    <div id="app"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        "use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var CleanToggle = function (_React$Component) {
  _inherits(CleanToggle, _React$Component);

  function CleanToggle(props) {
    _classCallCheck(this, CleanToggle);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.toggle = function (e) {
      _this.setState({ on: !_this.state.on });
    };

    _this.componentDidUpdate = function (e) {
      var tl = new TimelineMax();

      tl.to([_this.dotLBg, _this.dotGroup], 1, {
        x: _this.state.on ? .........完整代码请登录后点击上方下载按钮下载查看

网友评论0