css - 如何在 ReactJs 中使用 react-stack-cards 创建水平和垂直动画滑块？

Question

import React, { Component } from 'react'
import { ToggleCard, TinderLikeCard, StackCard } from 'react-stack-cards'

class Card extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            directionTinder: "swipeCornerDownRight",
            directionToggle: "sideSlide",
            directionStack: "topRight",
            isOpen: false
        }
        this.Tinder = null
    }

    onTinderSwipe() {
        this.Tinder.swipe()
    }
    onToggle() {
        this.setState({ isOpen: !this.state.isOpen })
    }

    render() {
        const {index, pic, name}=this.props.property
        return (
            <div className={`card-${index}`}>
                <h1>{index}</h1>
                <TinderLikeCard
                    images={pic}
                    width="550"
                    height="450"
                    direction={this.state.directionTinder}
                    duration={400}
                    ref={(node) => this.Tinder = node}
                    className="tinder"
                >
                </TinderLikeCard>
                <button onClick={this.onTinderSwipe.bind(this)}>Swipe</button>
                <h1>{name}</h1>
            </div>
        );
    }
}
export default Card

标签： cssreactjssassmaterial-uireact-router-dom