Реагируй на эмоции CSS - шаблон, возвращающий функцию, а не значение - PullRequest
Новая
       11

Реагируй на эмоции CSS - шаблон, возвращающий функцию, а не значение

0 голосов
/ 01 января 2019

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

Может кто-нибудь помочь мне сделать правильный синтаксисдля этого? 

import React from "react";
import { css } from "emotion";

const strike = keyframes`
  from{
    transform: scaleX(0)
  }
  to{
    transform : scaleX(1)
  }
`;

const todoStyle = css`
cursor: pointer;
  color: red;
  position: relative;
  display: inline-block;
  /* width: 200px; */
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    top: 50%;
    background: black;
    position: absolute;
    transform-origin: 0 50%;
    animation: ${strike} 0.3s ${props => (props.todo.complete === false ? " normal" : " reverse")};
  }
`;

// everything works except the animation property above is ignored

export default props => (
  <div className={todoStyle} onClick={props.toggleComplete}>
    {props.todo.text}
  </div>
);

1 Ответ

0 голосов
/ 14 января 2019

Когда вы вызываете animation: ${strike} 0.3s ${props => ...} в todoStyle, эмоции не будут знать, что такое реквизит - я удивлен, что ничего не выдает ошибку.

Вы можете попробовать переместить функцию реквизита внутри компонента:

  export default props => (
-   <div className={todoStyle} onClick={props.toggleComplete}>

+   <div className={css`
+     ${todoStyle}
+     animation: ${strike} 0.3s ${props => (!props.todo.complete ? "normal" : "reverse")};
+     `} onClick={props.toggleComplete}>

      {props.todo.text}
    </div>
  );
...