Как добавить эффект пульсации при щелчке карты в материале-ui

Question

Есть ли способ добавить эффект пульсации к материалу-ui Компонент карты при щелчке.

http://www.material-ui.com/#/components/card

И я также хотел бы знать, можно ли сделать мультипликационный эффект прийти на верхней части содержания компонента карты, а что он показывает в качестве фона.

Answer 1

Я вижу этот вопрос не ответил, поэтому я приведу последнюю дату решения (писать это как material-ui является v 0,18. +0,7 (стабильный):

вы должны импортировать пульсация комп более высокого порядка (HOC), как:.

import TouchRipple from 'material-ui/internal/TouchRipple';

Затем вы можете обернуть любой compomnen т вас выбор с ToucheRipple, как:

<TouchRipple> 
    <div> 
    MY RIPPLING DIV 
    </div> 
</TouchRipple> 

Или, если вам нужен apporach класс, основанный на CSS, вы можете использовать материализовать Lib ->https://react-materialize.github.io/#/

В этом случае, это так просто, как добавление значение waves опоры на материал-щ Button, как:

<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>

Answer 2

Официальный api, похоже, не поддерживает его. Но это то, что я делаю, когда я хочу использовать material-ui пульсации влияют:

Использование material-ui/internal/TouchRipple, взгляните на его примере source code

Использование:

<YourComponent> 
    <TouchRipple style={style}/> 
    {children} 
</YourComponent> 

Вам нужно пройти инлайн чтобы указать его высоту, ширину и положение, которое соответствует высоте, ширине и положению YourComponent

Answer 3

Подход, сделанный в @ xiaofan2406, никогда не работал для меня, o упоминание о прохождении высоты, ширины и положения кажется легко разрушаемым и может оказаться невозможным при использовании flexbox.

Однако мне удалось заставить его работать как:

<YourComponent> 
    <TouchRipple> 
     {children} 
    </TouchRipple> 
</YourComponent>