web-dev-qa-db-fra.com

Ajout de transitions aux composants stylisés

J'ai le composant suivant dans 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;
        }
`;

Il rend juste un composant avec la bibliothèque Styled-components. Il montre essentiellement un + signe.

Mais ensuite, je voudrais faire pivoter chacune des lignes séparément, en utilisant:

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

Et cela fonctionne très bien, mais malheureusement il n'y a pas de transitions (cela se produit immédiatement). J'ai essayé d'inclure des transitions dans chacune de ces lignes, mais cela n'affecte toujours pas les changements.

Une autre solution que j'ai essayée a été d'ajouter une classe, par ex. rotated:

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

Mais les composants stylisés ne fournissent pas réellement la possibilité de changer les classes dynamiquement en utilisant juste sa logique.

Dans l'attente de toute aide, merci.

javascriptcssreactjsstylesstyled-components
14
H. Doe

Vous pouvez essayer de passer des accessoires conditionnels au composant.

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

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

Et puis en toi SC:

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

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

Vous pouvez également utiliser un opérateur ternaire:

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

Assurez-vous également de définir le bouton en dehors de la fonction dans laquelle vous l'utilisez. Faites cette erreur en ce moment et ne comprenez pas pourquoi la transition n'a pas fonctionné (conseils pour moi à l'avenir).

1
Jonas Sandstedt

Je me débattais avec ça pendant un moment, je l'ai fait fonctionner en faisant ceci:

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 */
`;

Puis au retour:

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