react+TweenMax实现圆球滚动开关效果代码
代码语言:html
所属分类:表单美化
代码描述: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