React动画切换（开关）按钮（汉堡菜单）组件

ReactJS Animating Toggle Button

react, button

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const {
    Component, PropTypes
} = React;
const {
    render
} = ReactDOM;

class MenuToggle extends Component {

constructor(props) {
        super(props);

this.state = {
            isMenuOpen: false
        }

this.getMenuToggleClass = this.getMenuToggleClass.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);
    }

toggleMenu() {
        var isMenuOpen = !this.state.isMenuOpen;
        this.setState({
            isMenuOpen: !this.state.isMenuOpen
        });

if (typeof this.props.onChange === 'function') {
            this.props.onChange(isMenuOpen);
        }
    }

getMenuToggleClass() {
        let elementClasses = ['MenuToggle'];

if (this.state.isMenuOpen === true) {
            elementClasses.push('MenuToggle--active');
        }

return elementClasses.join(' ');
    }

render() {
        return ( < div className = {
                this.getMenuToggleClass()
            }
            onClick = {
                this.toggleMenu
            } >
            < div > < /div> < /div>
        );
    }

}

render( < MenuToggle / > ,
    document.getElementById('mount-point')
);

编译

CSS

.MenuToggle {
  
  $line-color: #1f4772;
  $line-height: 10%;
  $animation-speed: 300ms;
  $button-width: 100px;
  $button-height: 80px;
  
  position: relative;
  width: $button-width;
  height: $button-height;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
   
  &:before, 
  &:after, 
  div {   
    position: absolute;
    width: 100%;
    height: $line-height;
    background: $line-color;   
    transition: all $animation-speed;
  }
  
   &:before {
    content: '';
    top: 0;     
  }
  
  &:after {
    content: '';
    bottom: 0;  
  }
  
  div {   
    top: 50%;
    transform: translateY(-50%);
    transition: all $animation-speed / 2;
    opacity: 1;
  }
  
  &--active {
  
    &:before {    
      top: 50%;
      transform: translateY(-50%) rotateZ(135deg);
    }

&:after {
      bottom: 50%;
      transform: translateY(50%) rotateZ(45deg);
    }

div {
      opacity: 0;
    }
  }
}

// COMPONENT UNREALTED STYLES FOR DEMO

@import url('https://fonts.googleapis.com/css?family=Lato:100');

.scene {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(-180deg, #261957 0%, #158b9b 100%);
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 370px;
}

.panel {
  position: relative;
  display: inline-block;
  width: 170px;
  height: 170px;
  vertical-align: top;
  text-align: left;
  background: white;
  
  > div {    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.title {
  display: inline-block;
  width: 150px;  
  margin-left: 30px;
  vertical-align: top;
  font-size: 25px;
  line-height: 32px;
  font-family: 'Lato', sans-serif;
  text-align: left;
  color: white;
}

@media (max-width: 400px) {
  .container {
    width: 100%;
  }
  
  .title {
    width: 80%;
    margin: 30px 0 0 0;
    text-align: center;
  }
}

HTML

ReactJS Animating Toggle Button

react, button

编辑器支持Emmet

快捷键

ReactJS Animating Toggle Button

react, button

使用React.js实现泡泡糖（软糖 | 口香糖）风格的社交按钮

HTML5 CSS3一组文本对齐方式按钮（带切换动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：