Непрозрачность эффекта ряби в пользовательском интерфейсе React Material - PullRequest
Новая
       8

Непрозрачность эффекта ряби в пользовательском интерфейсе React Material

0 голосов
/ 18 декабря 2018

Я использую Material UI https://material -ui.com / .

Как изменить непрозрачность эффекта ряби с помощью обычной кнопки? 

<Button className={classes.ripple} />

ripple: {
   color: "red",
}

Я нашел это в документации: 

 /* Styles applied to the internal `Ripple` components `rippleVisible` class. */
  rippleVisible: {
    opacity: 0.3,
    transform: 'scale(1)',
    animation: `mui-ripple-enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`,
  },

1 Ответ

0 голосов
/ 18 декабря 2018

Вы можете сделать это следующим образом. 

const styles = theme => ({
  btn: {
      height: 60,
      fontSize: 18,
      textTransform: "none"
  },
  buttonRipple: {
      opacity: 0.3,
      transform: "scale(1)",
      animation: `ripple-effect 550ms ${theme.transitions.easing.easeInOut}`
  },
  "@keyframes ripple-effect": {
    "0%": {
        transform: "scale(0)",
        opacity: 0.1
    },
    "100%": {
        transform: "scale(1)",
        opacity: 0.9
    }
  }

})


render: function () {

  return (
    <Button
        className={classes.btn}
        TouchRippleProps={{ classes: { rippleVisible: classes.buttonRipple } }}
    >

  )
}

Вам потребуется определить новый ключевой кадр, поскольку непрозрачность контролируется анимацией ключевого кадра, где она принимает начальную и конечную непрозрачность.Если кнопка долго нажата, непрозрачность будет отображаться из непрозрачности, определенной в классе "buttonRipple".

Надеюсь, это поможет.

...