基于React实现的页面滑块

React Motion Slider 使用react-dom,js, react-motion.js和react.js实现的类似PPT幻灯片的页面滑动效果。

react, motion

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5486
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"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;
}

var _ReactMotion = ReactMotion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var spring = _ReactMotion.spring;

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

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

return _possibleConstructorReturn(this, _React$Component.call(this, props));
    }

ViewSlide.prototype.render = function render() {
        var isActive = this.props.active ? "active" : "";
        var classes = "ViewSlide " + isActive;
        return React.createElement(
            "div", {
                style: this.props.style,
                className: classes,
                onClick: this.props.onClick
            },
            this.props.children
        );
    };

return ViewSlide;
}(React.Component);

var ViewSlider = function(_React$Component2) {
    _inherits(ViewSlider, _React$Component2);

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

var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props));

_this2.state = {
            activeSlideIndex: 0,
            slides: [{
                triggers: 1,
                x: 0,
                content: React.createElement(
                    "h1",
                    null,
                    "Aww yeah. React Motion Flexbox Slider"
                )
            }, {
                triggers: 2,
                x: 100,
                content: React.createElement(
                    "h1",
                    null,
                    "Slidin'"
                )
            }, {
                triggers: 3,
                x: 200,
                content: React.createElement(
                    "h1",
                    null,
                    "We slippin' n' slidin' all over da place"
                )
            }, {
                triggers: 0,
                x: 300,
                content: React.createElement(
                    "h1",
                    null,
                    "Let's Go back to the start"
                )
            }, {
                triggers: 0,
                x: 400,
                content: React.createElement(
                    "h1",
                    null,
                    "Secret slide!"
                )
            }]
        };
        return _this2;
    }

ViewSlider.prototype.setActiveSlide = function setActiveSlide(slideIndex) {
        this.setState({
            activeSlideIndex: slideIndex
        });
    };

ViewSlider.prototype.render = function render() {
        var _this3 = this;

return ViewSlider;
}(React.Component);

ReactDOM.render(React.createElement(ViewSlider, null), document.getElementById("app"));

编译

CSS

HTML

React Motion Slider 使用react-dom,js, react-motion.js和react.js实现的类似PPT幻灯片的页面滑动效果。

react, motion

编辑器支持Emmet

快捷键

React Motion Slider 使用react-dom,js, react-motion.js和react.js实现的类似PPT幻灯片的页面滑动效果。

react, motion

基于ReactJS实现的3D井字游戏

使用React实现的圆环形滑块控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：