小编Shh*_*Shh的帖子

我有一个菜单,一旦按下使用Glamour for CSS的汉堡包图标,就显示在当前页面的顶部.

菜单从屏幕右侧动画制作并完美运行,但是我很难在菜单按下的任何地方进行动画处理.

动画是写的(animateOut)但我需要帮助代码在动画输入和输出之间轻弹,具体取决于点击:

• 单击汉堡菜单 - >菜单从右侧滑入.
• 单击菜单容器中的任意位置 - >菜单向右滑动.

HamburgerMenu.js

CSS

const cssHamburgerMenuIcon = css({
    position: 'absolute',
    height: 20,
    width: 20,
    right: 20,
    marginTop: 20,
})

const animateIn = css.keyframes({ 
    '0%': {
        transform: 'translateX(100%)'
    },
    '100%': {
        transform: 'translateX(0%)'
    }
})

const animateOut = css.keyframes({ 
    '0%': {
        transform: 'translateX(0%)'
    },
    '100%': {
        transform: 'translateX(100%)'
    }
})

const cssHamburgerMenu = css({
    display: 'flex',
    position: 'absolute',
    flexDirection: 'column',
    height: '100%',
    width: 250,
    right: 0,
    top: 0,
    zIndex: 1,
    color: 'white', …

如何在React JS onClick中的表单中重置值？

class AddFriendForm extends Component {
  constructor(props) {
   super(props)
   this.state = {
     firstname: '',
     lastname: '',
   }
 }

 render() {
    const { addFriend } = this.props

   const setFirstName = add => this.setState({ firstname: add.target.value })
   const setLastName = add => this.setState({ lastname: add.target.value })

return (
  <div>
    <div>
      <Label label="First Name" />
      <Field onChange={setFirstName} />

      <Label label="Last Name" />
      <Field onChange={setLastName} />

      <SecondaryButton
        name="Search"
        onClick={() => addFriend(this.state)}
      />

   <SecondaryButton
      name="Reset"
      onClick={() => ???}
      />
    </div>
  </div>
)
 } …

我有几个红色和黑色按钮,我想将"onmousedown"和"onmouseup"事件添加到共享同一类("按钮红色")的红色按钮组.

onmousedown我想更改添加类"opaque"和onmouseup再次删除它.

因此,已经"选中"的红色按钮变得稍微透明,并且onmouseup恢复正常(红色).其他按钮不受影响.

CSS

.button {
   background-color: black;
   color: white;
   height: 30px;
   width: 150px; 
   text-align: center;
}

.button.red {
  background-color: red;
}

.button.red.opaque { 
  opacity: 0.7;
}

javascript(到目前为止)

var classname = this.document.getElementsByClassName("button red");

for (var i = 0; i < classname.length; i++) { 
   classname[i].addEventListener('onmousedown', classList.add("opaque"), false);
   classname[i].addEventListener('onmouseup', classList.remove("opaque"), false);
}