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