向样式化组件添加过渡答案

【问题标题】：Adding transitions to styled components向样式化组件添加过渡
【发布时间】：2017-11-11 14:10:54
【问题描述】：

我在 React 中有以下组件：

const Button = styled.div`
        width: 30px;
        height: 30px;
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        margin: 0;

        &::before,
        &::after {
          content: "";
          position: absolute;
          background-color: #3d3935;
          transition: transform 0.25s ease-out;
        }

        &::before {
          top: 0;
          left: 50%;
          width: 4px;
          height: 100%;
          margin-left: -2px;
        }

        &::after {
          top: 50%;
          left: 0;
          width: 100%;
          height: 4px;
          margin-top: -2px;
        }
`;

它只是用 Styled-components 库渲染一个组件。它基本上显示一个+ 符号。

但是，我想分别旋转每一行，使用：

    &::before {
      transform: rotate(${this.state.expanded ? '0' : '45'}deg);
    }
    &::after {
      transform: rotate(${this.state.expanded ? '0' : '135'}deg);
    }

而且效果很好，但不幸的是没有过渡（它会立即发生）。尝试在每一行中包含过渡，但仍然不影响更改。

我尝试过的另一个解决方案是添加一个类，例如rotated:

    &.rotated::before {
      transform: rotate(45deg);
    }

但是样式的组件实际上并没有提供仅使用其逻辑来动态更改类的可能性。

期待任何形式的帮助，谢谢。

【问题讨论】：

将过渡应用于元素本身，而不是伪元素。您对元素进行转换，但将转换应用于伪。
@Morpheus 试过了，没用 :(
我想知道引入初始变换值是否会有所帮助，例如jsfiddle.net/uhqx7enc

标签： javascript css reactjs styles styled-components

【解决方案1】：

您可以尝试将条件 props 传递给组件。

import styled, { css } from 'styled-components';

<Button expanded={ this.state.expanded } />

然后在你的 SC：

const Button = styled.div`
  transform: rotate(0deg);
  transition: transform .2s ease-out;

  ${ props => props.expanded && css`
    transform: rotate(45deg);
  `};
`;

【讨论】：

+1 ${ props => props.expanded && css` transform: rotate(45deg);`};我花了很长时间才找到这个。谢谢！

【解决方案2】：

我为此苦苦挣扎了一段时间，我通过这样做让它工作：

import styled from 'styled-components';
import { IconButton } from '@material-ui/core';
import { Pin } from 'styled-icons/boxicons-solid/Pin';

const IconWrapper = styled(IconButton).attrs(props => ({
  style: {
   padding: '0',
   transition: 'transform 0.2s ease-out',
   transform: props.rotated ? 'rotate(0)' : 'rotate(90deg)',
  },
}))`
  /* additional css goes here */
`;

然后在返回：

<IconWrapper
  rotated={isRotated}
  onClick={handleClick} /* toggle isRotated true/false */
>
  <Pin size="20" />
</IconWrapper>

【讨论】：

【解决方案3】：

你也可以使用三元运算符：

const Button = styled.div`
  transform: ${props => props.expanded ? 'rotate(180deg)' : 'rotate(0deg)'};
  transition: transform .2s ease-out;
`;

还要确保在您使用它的函数之外定义按钮。现在犯了这个错误，并且不明白为什么转换不起作用（未来我的提示）。

【讨论】：