使用React-motion、glamor和glamorous实现的边栏面板切换动画

react-motion with glamorous & glamor

react, panel, toggle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const { Component, createElement, DOM } = React;
const { Motion, spring, presets } = ReactMotion;
const { Div, Button } = glamorous;

const buttonStyle = {
  backgroundColor: 'transparent',
  color: 'white',
  border: '1px solid white',
  borderRadius: 4,
  height: 40,
  lineHeight: 2.5,
  paddingLeft: 16,
  paddingRight: 16,
  outline: 'none',
  cursor: 'pointer'
}

const appStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  width: '100vw',
  background: '#55DFBD'
}

const panelStyle = {
  position: 'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  width: 320,
  background: '#45B0F9'
}

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      panelOpen: false
    }
  }

render () {
    const { panelOpen } = this.state

return (
      <Div css={appStyle}>
        <Button
          css={buttonStyle}
          onClick={() => this.setState({ panelOpen: !panelOpen })}
        >
          Toggle Panel
        </Button>
        <Motion
          style={{
            x: spring(panelOpen ? 0 : -100),
            opacity: spring(panelOpen ? 1 : 0)
          }}
        >{(currentStyles) => (
          <Div
            css={{
              ...panelStyle,
              transform: `translate3d(${currentStyles.x}%, 0, 0)`,
              opacity: currentStyles.opacity
            }}
          >
            <Button
              css={buttonStyle}
              onClick={() => this.setState({ panelOpen: false })}
            >
              Close Panel
            </Button>
          </Div>
        )}
        </Motion>
      </Div>
    )
  }
}

ReactDOM.render(createElement(App), document.getElementById('app'))

编译

CSS

HTML

react-motion with glamorous & glamor

react, panel, toggle

编辑器支持Emmet

快捷键

react-motion with glamorous & glamor

react, panel, toggle

使用React、MobX和jQuery实现的支付表单模板

使用React-Konva.js实现的爆炸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：