Элемент начального реквизита элементов стиля - тройной/тип переключателя

105
9

Ниже у меня есть ярлык, который при загрузке не должен иметь анимации и фокуса в соответствии с props.moveLabelUp === true (входной фокус true) должен анимировать ярлык вверх и props.moveLabelUp === false (входной фокус false) должен анимировать ярлык вниз но при начальной загрузке анимации вообще не должно быть.

Я установил props.moveLabelUp равным нулю и придумал решение ниже:

Пожалуйста, сообщите, есть ли лучший способ его кодирования:

const StyledLabel: StyledComponentClass = styled(Label) '
position: absolute;
top: 9px;
left: 5px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
background: white;
color: ${props => props.moveLabelUp ? 'blue' : 'black'}
transform: none;

animation: ${props => props.moveLabelUp ? '
${moveLabelUp} .2s forwards ease;
' : '
${moveLabelBack} .2s forwards ease;
'
}';

const StyledLabelOverride = StyledLabel.extend'
animation: ${props => props.moveLabelUp === null && 'none'}
';

Здесь у нас есть анимации:

const moveLabelUp = keyframes'
from {
transform: translateY(0px); font-size: .9em;
}

to {
transform: translateY(-16px); font-size: .8em;
}
';

const moveLabelBack = keyframes'
from {
transform: translateY(-16px); font-size: .8em;
}

to {
transform: translateY(0px); font-size: .9em;
}
';

Благодарю.

спросил(а) 2018-06-11T16:46:00+03:00 2 года, 3 месяца назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема