基于ReactJS和Bootstrap实现的移动图表应用

卡片翻转样式的移动应用，正面显示信息，点击编辑时翻转呈现详情编辑页面。

react, card, chart

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
'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 placeholder = document.createElement("li");
placeholder.className = "placeholder";
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;

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

function Pie() {
        _classCallCheck(this, Pie);

return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
    }

Pie.prototype.render = function render() {
        var _props = this.props;
        var color = _props.color;
        var width = _props.width;
        var progress = _props.progress;

className: "animated",
                        cx: "250",
                        cy: "250",
                        r: "200",
                        stroke: "",
                        fillOpacity: "0",
                        strokeWidth: width + 10,
                        strokeDasharray: [realProgress, c],
                        strokeDashoffset: c * progress
                    }),
                    React.createElement("circle", {
                        filter: "url(#shadow)",
                        className: "animated shadow",
                        cx: "250",
                        cy: "250",
                        r: "200",
                        stroke: color,
                        fillOpacity: "0",
                        strokeWidth: width,
                        strokeDasharray: [realProgress, c],
                        strokeDashoffset: c * progress
                    }),
                    React.createElement("circle", {
                        className: "animated fill",
                        cx: "250",
                        cy: "250",
                        r: "200",
                        stroke: color,
                        fillOpacity: "0",
                        strokeWidth: width,
                        strokeDasharray: [realProgress, c],
                        strokeDashoffset: c * progress
                    }),
                    React.createElement("circle", {
                        cx: "250",
                        cy: "250",
                        r: "200",
                        stroke: color,
                        fillOpacity: "0",
                        strokeWidth: "5",
                        strokeDasharray: [c, c],
                        strokeOpacity: "0.1"
                    })
                )
            )
        );
    };

return Pie;
}(React.Component);

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

function Application() {
        _classCallCheck(this, Application);

return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
    }

Application.prototype.render = function render() {
        var percent = this.props.percent;
        var colorChart = this.props.colorChart;
        return React.createElement(
            "div",
            null,
            React.createElement(
                "div", {
                    className: "box"
                },
                React.createElement(Pie, {
                    color: colorChart,
                    width: 15,
                    progress: percent

})
            )
        );
    };

return Application;
}(React.Component);

var progressUpdate;
var goals = [{
    category: 'car',
    name: 'Car',
    amount: 20000,
    progress: 6593,
    flipped: false,
    dragStatus: true
}, {
    category: 'plane',
    name: 'Vacation',
    amount: 3500,
    progress: 2984,
    flipped: false,
    dragStatus: true
}];

var dragStatus = true;

var GoalCard = function(_React$Component3) {
    _inherits(GoalCard, _React$Component3);

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

var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this, props));

_this3.state = {
            condition: false,
            progress: _this3.props.item.progress,
            input1: _this3.props.item.name,
            input2: _this3.props.item.amount,
            input3: _this3.props.item.progress,
            selectValue: _this3.props.item.category
        };
        return _this3;
    }

GoalCard.prototype.addMoney = function addMoney() {
        var addFunds = prompt('Add funds for: ' + this.props.item.name, "0");
        this.props.item.progress += Number(addFunds);
        this.setState({
            item: this.props.item
        });
    };

GoalCard.prototype.onSave = function onSave() {
        this.props.item.progress = progressUpdate;
        this.setState({
            item: this.props.item
        });
    };

GoalCard.prototype.editGoal = function editGoal(index) {
        this.props.onFlip(index);
        this.setState({
            condition: !this.state.condition,
            input1: this.props.item.name,
            input2: this.props.item.amount,
            input3: this.props.item.progress,
            selectValue: this.props.item.category
        });
    };

GoalCard.prototype.deleteGoal = function deleteGoal(index) {
        this.props.onDelete(index);
        this.setState({
            condition: !this.state.condition,
            input1: this.props.item.name,
            input2: this.props.item.amount,
            input3: this.props.item.progress,
            selectValue: this.props.item.category,
            flipped: false,
            dragStatus: true
        });
    };

GoalCard.prototype.cancelEdit = function cancelEdit(index) {
        this.props.onFlip(index);
        this.setState({
            condition: !this.state.condition,
            input1: this.props.item.name,
            input2: this.props.item.amount,
            input3: this.props.item.progress,
            selectValue: this.props.item.category
        });
    };

GoalCard.prototype.saveGoal = function saveGoal(index) {
        this.props.onFlip(index);
        this.setState({
            condition: !this.state.condition
        });
        this.props.item.name = this.state.input1;
        this.props.item.amount = this.state.input2;
        this.props.item.progress = this.state.input3;
        this.props.item.category = this.state.selectValue;
    };

GoalCard.prototype.handleChange = function handleChange(name, e) {
        var change = {};
        change[name] = e.target.value;
        this.setState(change);
    };

GoalCard.prototype.handleDropdown = function handleDropdown(e) {
        this.setState({
            selectValue: e.target.value
        });
    };

GoalCard.prototype.render = function render() {
        var message;
        var strokeColor;
        var status;
        var remaining;
        var percentRemaining;
        if (this.props.item.progress / this.props.item.amount < 1) {
            strokeColor = "#01579B";
            status = "Remaining";
            remaining = (this.props.item.amount - this.props.item.progress).toLocaleString();
            percentRemaining = "(" + ((this.props.item.amount - this.props.item.progress) / this.props.item.amount * 100).toFixed(0) + "%)";
        } else {
            strokeColor = "#7dbf69";
            status = "Exceeded";
            remaining = Math.abs(this.props.item.amount - this.props.item.progress).toLocaleString();
            percentRemaining = "(" + Math.abs((this.props.item.amount - this.props.item.progress) / this.props.item.amount * 100).toFixed(0) + "%)";
        }

return React.createElement(
            "div", {
                className: this.state.condition ? "flipped card-container" : "card-container"
            },
            React.createElement(
                "figure", {
                    className: "front"
                },
                React.createElement(
                    "div", {
                        className: "goal--top"
                    },
                    React.createElement(
                        "a", {
                            href: "#",
                            className: "edit",
                            onClick: this.editGoal.bind(this, this.props.item.index)
                        },
                        React.createElement("i", {
                            className: "fa fa-pencil-square-o"
                        })
                    ),
                    React.createElement(
                        "div", {
                            className: "goal__name"
                        },
                        this.props.item.name
                    ),
                    React.createElement(Application, {
                        percent: this.props.item.progress / this.props.item.amount,
                        colorChart: strokeColor
                    }),
                    React.createElement(
                        "div", {
                            className: "goal--top__container"
                        },
                        React.createElement("i", {
                            className: 'category fa fa-' + this.props.item.category,
                            "aria-hidden": "true"
                        }),
                        React.createElement(
                            "div", {
                                className: "goal--progress"
                            },
                            React.createElement(
                                "span", {
                                    className: "money"
                                },
                                this.props.item.progress.toLocaleString()
                            )
                        ),
                        React.createElement(
                            "div", {
                                className: "goal--amount"
                            },
                            "of ",
                            React.createElement(
                                "span", {
                                    className: "money"
                                },
                                this.props.item.amount.toLocaleString()
                            )
                        )
                    )
                ),
                React.createElement(
                    "div", {
                        className: "goal--bottom"
                    },
                    React.createElement(
                        "div", {
                            className: "descriptor"
                        },
                        status,
                        React.createElement(
                            "span", {
                                className: "money right goal--remain"
                            },
                            remaining
                        ),
                        React.createElement(
                            "span", {
                                className: "percent right"
                            },
                            percentRemaining
                        )
                    ),
                    React.createElement(Example, {
                        name: this.props.item.name,
                        progress: this.props.item.progress,
                        amount: this.props.item.amount,
                        onSave: this.onSave.bind(this)

})
                )
            ),
            React.createElement(
                "figure", {
                    className: "back"
                },
                React.createElement(
                    "a", {
                        href: "#",
                        className: "back-arrow",
                        onClick: this.cancelEdit.bind(this, this.props.item.index)
                    },
                    React.createElement("i", {
                        className: "fa fa-angle-left"
                    })
                ),
                React.createElement(
                    "h3", {
                        className: "card-title"
                    },
                    "Goal Details"
                ),
                React.createElement(
                    "div", {
                        className: "input-container"
                    },
                    React.createElement(
                        "label", {
                            name: "name",
                            className: "descriptor"
                        },
                        "Name"
                    ),
                    React.createElement("input", {
                        type: "text",
                        placeholder: "Name",
                        value: this.state.input1,
                        onChange: this.handleChange.bind(this, 'input1')
                    }),
                    React.createElement(
                        "label", {
                            name: "amount",
                            className: "descriptor"
                        },
                        "Goal"
                    ),
                    React.createElement(
                        "span", {
                            className: "edit-money"
                        },
                        "$"
                    ),
                    React.createElement("input", {
                        type: "number",
                        placeholder: "Amount",
                        value: this.state.input2,
                        onChange: this.handleChange.bind(this, 'input2')
                    }),
                    React.createElement(
                        "label", {
                            name: "progress",
                            className: "descriptor"
                        },
                        "Progress"
                    ),
                    React.createElement(
                        "span", {
                            className: "edit-money"
                        },
                        "$"
                    ),
                    " ",
                    React.createElement("input", {
                        type: "number",
                        placeholder: "Progress",
                        value: this.state.input3,
                        onChange: this.handleChange.bind(this, 'input3')
                    }),
                    "         ",
                    React.createElement(
                        "label", {
                            name: "icon",
                            className: "descriptor"
                        },
                        "Icon"
                    ),
                    React.createElement(
                        "div", {
                            className: "dropdown-wrapper"
                        },
                        React.createElement(
                            "select", {
                                value: this.state.selectValue,
                                onChange: this.handleDropdown.bind(this)
                            },
                            React.createElement(
                                "option", {
                                    value: "car"
                                },
                                "Car"
                            ),
                            React.createElement(
                                "option", {
                                    value: "plane"
                                },
                                "Plane"
                            ),
                            React.createElement(
                                "option", {
                                    value: ""
                                },
                                "None"
                            )
                        )
                    )
                ),
                React.createElement("input", {
                    type: "button",
                    className: "button",
                    value: "Save Changes",
                    onClick: this.saveGoal.bind(this, this.props.item.index)
                }),
                React.createElement(
                    "a", {
                        href: "#",
                        className: "delete",
                        onClick: this.deleteGoal.bind(this, this.props.item.index)
                    },
                    "Delete Goal"
                )
            )
        );
    };

return GoalCard;
}(React.Component);

this.setState(change);
        this.setState({
            sum: this.props.progress + Number(change[name])

});
    },
    render: function render() {

return React.createElement(
            "div",
            null,
            React.createElement(
                Button, {
                    bsStyle: "primary",
                    bsSize: "large",
                    onClick: this.open,
                    className: "button"
                },
                "Add funds"
            ),
            React.createElement(
                Modal, {
                    show: this.state.showModal,
                    onHide: this.close
                },
                React.createElement(
                    Modal.Header, {
                        closeButton: true
                    },
                    React.createElement(
                        Modal.Title,
                        null,
                        "Add Funds for ",
                        this.props.name
                    )
                ),
                React.createElement(
                    Modal.Body,
                    null,
                    React.createElement(
                        "label",
                        null,
                        "Current progress:"
                    ),
                    React.createElement(
                        "div", {
                            className: "data"
                        },
                        "$",
                        this.props.progress.toLocaleString()
                    ),
                    React.createElement(
                        "label",
                        null,
                        "Add amount:"
                    ),
                    React.createElement(
                        "div", {
                            className: "data"
                        },
                        React.createElement(
                            "span", {
                                className: "pre-money"
                            },
                            "$"
                        ),
                        " ",
                        React.createElement("input", {
                            type: "number",
                            className: "fund-container",
                            defaultValue: "",
                            onKeyPress: this.submit.bind(this),
                            onChange: this.handleChange.bind(this, 'input1'),
                            autoFocus: true
                        })
                    ),
                    React.createElement(
                        "p", {
                            className: "smallprint"
                        },
                        " Total Progress: ",
                        React.createElement(
                            "span", {
                                className: "pre-money"
                            },
                            "$"
                        ),
                        this.state.sum.toLocaleString()
                    )
                ),
                React.createElement(
                    Modal.Footer,
                    null,
                    React.createElement(
                        Button, {
                            onClick: this.close
                        },
                        "Close"
                    ),
                    React.createElement(
                        Button, {
                            type: "button",
                            className: "btn-primary",
                            onClick: this.save.bind(this, this.props)
                        },
                        "Update Progress"
                    )
                )
            )
        );
    }
});

var GoalList = React.createClass({
    displayName: "GoalList",

getInitialState: function getInitialState() {
        return {
            data: this.props.data
        };
    },
    dragStart: function dragStart(e) {
        //this.refs['update'].updateGoal();
        this.dragged = e.currentTarget;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData("text/html", e.currentTarget);
    },
    dragEnd: function dragEnd(e) {
        this.dragged.style.display = "block";
        placeholder.remove();
        // Update data
        var data = this.state.data;
        var from = Number(this.dragged.dataset.id);
        var to = Number(this.over.dataset.id);
        if (from < to) to--;
        if (this.nodePlacement == "after") to++;
        data.splice(to, 0, data.splice(from, 1)[0]);
        this.setState({
            data: data
        });
    },
    dragOver: function dragOver(e) {

e.preventDefault();
        this.dragged.style.display = "none";
        if (e.target.className == "placeholder") return;
        this.over = e.target;
        // Inside the dragOver method
        var relY = e.pageY - this.over.offsetTop;
        var height = this.over.offsetHeight / 2;
        var relX = e.pageX - this.over.offsetLeft;
        var width = this.over.offsetWidth / 2;
        var parent = e.target.parentNode;

if (relX >= width) {
            this.nodePlacement = "after";
            parent.insertBefore(placeholder, e.target.nextElementSibling);
        } else {
            this.nodePlacement = "before";
            parent.insertBefore(placeholder, e.target);
        }
        this.setState({
            data: this.props.data
        });
    },
    onFlip: function onFlip(i) {
        var data = this.state.data;
        data[i].flipped = !data[i].flipped;

this.setState({
            data: data
        });

if (data[i].flipped) {
            var data = this.props.data;
            //	data[i].dragStatus = false;
            dragStatus = false;
        } else {
            //	data[i].dragStatus= true;
            dragStatus = true;
        }
    },
    onDelete: function onDelete(i) {
        var data = this.props.data;
        var newData = this.state.data.slice(); //copy array
        newData.splice(i, 1); //remove element
        this.setState({
            data: newData
        }); //update state
        this.props = newData;
        //var data = this.props.data;
        data[i].flipped = !data[i].flipped;
        if (data[i].flipped) {

//	data[i].dragStatus = false;
            dragStatus = false;
        } else {
            //	data[i].dragStatus= true;
            dragStatus = true;
        }
        data = newData;
        //data.splice(i, 1);

//	this.setState({ data: data});
    },
    render: function render() {

return React.createElement(
            "ul", {
                className: "goal__list",
                onDragOver: this.dragOver
            },
            this.state.data.map(function(item, i) {

return React.createElement(
                    "li", {
                        "data-id": i,
                        key: i
                            // draggable={goals[i].dragStatus}
                            ,
                        draggable: dragStatus,
                        onDragEnd: this.dragEnd.bind(this),
                        onDragStart: this.dragStart.bind(this)

},
                    React.createElement(GoalCard, {
                        item: item,
                        onFlip: this.onFlip.bind(this, i),
                        cancelEdit: this.onFlip.bind(this, i),
                        saveGoal: this.onFlip.bind(this, i),
                        onDelete: this.onDelete.bind(this, i)

})
                );
            }, this)
        );
    }

});

ReactDOM.render(React.createElement(GoalList, {
    data: goals
}), document.getElementById('app'));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body {
    -webkit-text-size-adjust: 100%;
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
input {
    -webkit-appearance: none;
}
*,
*:after,
*:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
.pen-description {
    margin: 60px 0;
    text-align: center;
}
.pen-description .summary {
    margin-bottom: 10px;
}
.pen-description .note {
    color: #555;
    font-size: .85rem;
}
html,
body {
    min-height: 100%;
}
html {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: initial;
}
/* boostrap overrides */

a,
a:hover,
a:visited {
    text-decoration: none;
}
p {
    margin: 0;
}
label {
    display: initial;
}
/*******************/

body {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNmE5NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5ZDVlOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #226a96), color-stop(100%, #99d5e8));
    background-image: -webkit-linear-gradient(left bottom, #226a96 0%, #99d5e8 100%);
    background-image: linear-gradient(to right top, #226a96 0%, #99d5e8 100%);
    font-family: 'Lato';
    background-color: #eee;
    color: #555;
    min-width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-perspective: 8000px;
    perspective: 8000px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
ul {
    list-style: none;
    margin: auto;
    padding: 0;
}
.card-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
li {
    cursor: -webkit-grab;
    cursor: grab;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    float: left;
}
li[draggable=false] {
    cursor: default;
}
li[draggable=false] figure.front,
li[draggable=false] figure.back {
    box-shadow: none;
}
li .card-container {
    pointer-events: none;
}
li input[type="text"],
li input[type="number"] {
    border: 0 none;
    border-bottom: 1px solid #eee;
    pointer-events: initial;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    outline: 0 none;
    font-size: 1rem;
    -webkit-transition: border-bottom 0.2s ease-in-out;
    transition: border-bottom 0.2s ease-in-out;
}
li input[type="text"]:focus,
li input[type="number"]:focus {
    border-bottom: 1px solid #3a8bbb;
}
li.placeholder {
    background: rgba(255, 255, 255, 0.2);
    height: 494px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 330px;
    border-radius: 5px;
}
.modal {
    overflow-y: auto;
}
.modal-dialog {
    width: 400px;
}
.modal .fund-container {
    border: 1px solid #ddd;
    border-radius: 3px;
    height: 40px;
    margin-left: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px 0;
    width: 125px;
    text-align: right;
}
.modal label {
    display: inline-block;
    width: 48%;
}
.modal .data {
    width: 50%;
    text-align: right;
    margin-left: 5px;
    display: inline-block;
}
.modal .smallprint {
    font-size: .7rem;
    text-align: right;
}
.modal .pre-money {
    opacity: .7;
}
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}
.modal-container {
    position: relative;
}
.modal-container .modal,
.modal-container .modal-backdrop {
    position: absolute;
}
button {
    pointer-events: initial;
}
.card-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}
.back-arrow {
    pointer-events: initial;
    display: table;
    position: absolute;
    padding: 20px;
    margin: -20px;
    font-size: 1.2rem;
}
.back-arrow:hover .fa {
    color: #777777;
}
.edit-money {
    display: table;
    position: absolute;
    margin-top: 10px;
    opacity: .7;
}
.edit-money + input {
    padding-left: 15px;
}
.delete {
    color: #777;
    pointer-events: initial;
    text-align: center;
    font-size: .8rem;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    display: table;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}
.delete:hover {
    color: #e54b4b;
}
figure {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
figure.front {
    background: #fff;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    overflow: hidden;
    pointer-events: intial;
    border-radius: 5px;
    padding: 20px;
    margin: 10px;
    width: 330px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 10px 20px 0 rgba(13, 59, 86, 0.5);
}
figure.back {
    background-color: #fff;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    left: 0;
    margin: 10px;
    margin-top: 0;
    padding: 20px;
    width: 330px;
    height: 100%;
    top: 0;
    border-radius: 5px;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
figure .input-container {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.flipped figure.back {
    opacity: 1;
}
.flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.goal__name {
    color: #777;
    font-size: .75rem;
    text-align: center;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.goal--progress {
    color: #222;
    font-size: 1.7rem;
    margin-bottom: 10px;
    text-align: center;
}
.goal--remain {
    color: #222;
}
.goal--amount {
    color: #777;
    font-size: .8rem;
    text-align: center;
}
.goal--top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    height: 375px;
}
.goal--top__container {
    margin: auto;
    position: relative;
}
.edit {
    pointer-events: initial;
    padding: 20px;
    position: absolute;
    right: 0;
    margin: -20px;
    top: 0;
    margin-top: -13px;
}
.edit:hover .fa {
    color: #777777;
}
.edit .fa {
    font-size: 1.2rem;
}
.money:before {
    content: "$";
}
.right {
    float: right;
    margin-left: 5px;
}
.percent {
    color: #777;
}
.descriptor {
    font-size: .8rem;
    margin-bottom: 20px;
}
.dropdown-wrapper {
    margin-top: 10px;
    pointer-events: initial;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px 5px;
    position: relative;
    cursor: pointer;
    width: 100%;
    -webkit-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
}
.dropdown-wrapper:hover {
    border: 1px solid #d5d5d5;
}
.dropdown-wrapper:after {
    font-family: 'FontAwesome';
    content: "\f107";
    color: #3FB8AF;
    position: absolute;
    right: 10px;
    top: 7px;
}
.dropdown-wrapper.outline {
    border: 1px solid rgba(63, 184, 175, 0.5);
    box-shadow: 0 0 10px rgba(63, 184, 175, 0.2);
}
select {
    cursor: pointer;
    pointer-events: initial;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0 none;
    font-size: .8em;
    outline: 0;
    width: 100%;
    display: block;
}
.button {
    background: #3a8bbb;
    border: 0 none;
    color: #fff;
    margin-bottom: auto;
    cursor: pointer;
    border-radius: 5px;
    pointer-events: initial;
    height: 44px;
    text-transform: uppercase;
    text-align: center;
    font-size: .7rem;
    letter-spacing: 2px;
    padding: 15px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
}
.button:hover {
    background: #347da8;
}
.fa {
    font-family: 'FontAwesome';
    display: block;
    text-align: center;
}
.fa.category {
    left: 0;
    right: 0;
    top: -40px;
    margin: auto;
    position: absolute;
}
.fa.fa-plane {
    color: #3FB8AF;
}
.fa.fa-car {
    color: #e54b4b;
}
.fa.fa-pencil-square-o,
.fa.fa-angle-left {
    color: #aaa;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}
/** svg **/

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    width: 100%;
}
.animated {
    -webkit-animation: dash 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation: dash 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}
svg {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
text {
    text-anchor: middle;
}
circle {
    stroke-linecap: round;
}
.shadow {
    opacity: .6;
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

HTML

卡片翻转样式的移动应用，正面显示信息，点击编辑时翻转呈现详情编辑页面。

react, card, chart

编辑器支持Emmet

快捷键

卡片翻转样式的移动应用，正面显示信息，点击编辑时翻转呈现详情编辑页面。

react, card, chart

使用ReactJS和Mo.js实现的甩热狗动画

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：