将过渡添加到已设置样式的构件 [英] Adding transitions to styled components

问题描述

我在Reaction中有以下组件：

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;
        }
`;

它只呈现带有库的组件样式化组件。它基本上显示一个+符号。

然后，我想分别旋转每一行，使用：

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

和它工作得很好，但不幸的是没有转换(它立即发生)。已尝试在这些行的每一行中包含过渡，但仍不会影响更改。

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

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

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

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

推荐答案

您可以尝试向组件传递条件道具。

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);
  `};
`;

这篇关于将过渡添加到已设置样式的构件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！