Анимировать размер сетки переключения - PullRequest
Новая
       13

Анимировать размер сетки переключения

0 голосов
/ 08 сентября 2018

У меня есть проект с пользовательским интерфейсом React и Material.

Мне нужно несколько советов о том, как анимировать изменение размера элемента сетки. Элемент по умолчанию sm = {3}, когда пользователь наводит курсор на элемент, он изменяется на sm = {6}.

Вот мой код: 

<Grid
                        item
                        xs={this.state.hoverItem ? 6 : 3}
                        spacing={24}
                        onMouseEnter={this.handleItemHover}
                        onMouseLeave={this.handleItemHoverLeave}
                    >
                        <Paper
                            elevation={this.state.hoverItem ? 5 : 1}
                            className={classNames(
                                classes.card,
                                this.state.hoverItem && classes.cardHover
                            )}
                            >
</Paper>
</Grid>

И вот как я делаю свой JSS: 

card: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
    transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen
    })
},
cardHover: {
    transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen
    })
},

Я думал, что это должно оживить это. Однако переходы ничего не делают.

1 Ответ

0 голосов
/ 08 сентября 2018

Привет, это была действительно интересная проблема дня, я попытался реализовать простые переходы при наведении. Вы можете увидеть здесь на коды andbox:

Размер сетки переключения анимации

PS Я добавил ваше свойство перехода в качестве комментария без указания width Отлично сработало. Вы можете сообщить о проблеме на Material-UI это правильное время.

Пожалуйста, дайте мне знать, если проблема не устранена.

...