web-dev-qa-db-ja.com

スタイル付きコンポーネントへの遷移の追加

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

Andうまく機能しますが、残念ながら遷移はありません（すぐに発生します）。これらの各行に遷移を含めようとしましたが、それでも変更には影響しません。

私が試した別の解決策は、クラスを追加することでした。 rotated：

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

しかしスタイル付きコンポーネントは、実際にはそれだけのロジックを使用してクラスを動的に変更する可能性を提供しません。

どうぞよろしくお願いいたします。

javascriptcssreactjsstylesstyled-components
14
H. Doe

条件付きの小道具をコンポーネントに渡してみることができます。

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

三項演算子を使用することもできます。

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

また、ボタンを使用している関数よりもボタンの方が優れていることを確認してください。今は間違いを犯し、移行が機能しない理由を理解していません（将来の私へのヒント）。

1
Jonas Sandstedt

私はしばらくこれに苦労していました、これを行うことでそれを機能させることができました：

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>
1
Brandon