Невозможно стилизовать вложенные анимации с ключевыми кадрами с помощью styled-компонентов - PullRequest
Новая
       27

Невозможно стилизовать вложенные анимации с ключевыми кадрами с помощью styled-компонентов

1 голос
/ 27 июня 2019

Я создаю анимацию для изображения с настроенной анимацией в styleled-компоненте с условным оформлением.Но я получаю сообщение об ошибке, в котором говорится, что

"Uncaught Error: кажется, вы интерполируете объявление ключевого кадра (bZfjDs) в строку без тегов. Это было поддержано в styled-components v3, но не дольшеподдерживается в v4, так как ключевые кадры теперь вводятся по требованию. Оберните вашу строку в помощник css`` (см. https://www.styled -components.com / docs / api # css ), который обеспечивает стилиправильно введен. "

Я сделал это с синтаксисом v4, но он все еще не работает.Есть ли способ сделать это?

Я пытался следовать синтаксису, но он все равно не будет работать.

Сначала я сделал: 

animation: ${props => (props.animating === 'true' ? `${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;

где fadeInSlideмои собственные ключевые кадры, затем я попытался сделать: 

const fadeInAnimation = css`
    animation: ${fadeInSlide} 1s ease-in-out infinite forwards;
  `
const BlockImage = styled(Image)`
  animation: ${props => (props.animated === 'true' ? `${fadeInAnimation}` : '')} ;
`

, но это также дает мне ошибку.

1 Ответ

0 голосов
/ 07 июля 2019

Для меня сработало добавление свойства css. Возможно, это могло бы помочь: 

animation: ${props => (props.animating === 'true' ? css`${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;
...