Элемент начального реквизита элементов стиля - тройной/тип переключателя
Ниже у меня есть ярлык, который при загрузке не должен иметь анимации и фокуса в соответствии с 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;
}
';
Благодарю.
Еще в рубрике
- Вопросы
- Styled-components
- Элемент начального реквизита элементов стиля - тройной/тип переключателя