Animazioni e Reazione - è una cattiva pratica mescolarle?

Question

Animazioni e Reazione - è una cattiva pratica mescolarle?

#1 da (2 voti)

2

Sono stato in discussioni con programmatori che mescolare elementi con animazioni e reagire è una pessima pratica e che tutte le animazioni dovrebbero essere in un foglio di stile perché è qualcosa di presentazionale che riguarda solo i CSS.

Tuttavia, ho anche visto un gran numero di librerie che usano elementi come VelocityComponent o ReactCSSTransitionGroup .

Volevo utilizzare VelocityComponent solo per la possibilità di attivare i richiami sulle animazioni in corso di completamento / avvio, ma non sono sicuro che ciò sia considerato una buona pratica.

class Sidebar extends Component {
  static propTypes = {
    open: PropTypes.func,
    onRequestChange: PropTypes.func,
    onRequestComplete: PropTypes.func,
    isOpen: PropTypes.bool.isRequired,
  };
  render() {
    return (<div className={styles.sidebar}>
      <VelocityComponent
        duration={200}
        animation={{ opacity: this.props.isOpen ? 1 : 0 }}
        complete={() => this.props.onRequestComplete(this.props.isOpen)}
      >
        {this.props.children}
      </VelocityComponent>
    </div>);
  }
}

Un caso d'uso di esempio per questo sarebbe caricare alcune richieste asincrone DOPO che la barra laterale è aperta per garantire che l'animazione funzioni senza intoppi.

Quindi è una cattiva pratica includere questo inline?

javascript asynchronous-programming web reactjs animation

posta Crow 28.12.2016 - 18:07

fonte

1 risposta

Leggi altre domande sui tag javascript asynchronous-programming web reactjs animation

Oggetto che deve essere utilizzato dal livello di servizio Organizzazione di Jenkins attorno alle filiali SVN e agli ambienti di distribuzione

score 2 · Answer 1

Le animazioni CSS sono quasi sempre l'opzione migliore

Nel tuo esempio, potresti usare le callback che attivazione al completamento dell'animazione . È sempre più difficile concepire situazioni in cui l'animazione CSS non è un'opzione.

Dieci anni fa, in genere, l'uso di JavaScript per l'animazione comportava meno svantaggi, perché spesso era l'unica cosa per cui veniva utilizzato.

Ricorda che JavaScript è a thread singolo. In un'applicazione ReactJS (o altra AJAX), Javascript viene utilizzato per la visualizzazione del contenuto, spesso una buona dose di "lavoro". Se aggiungi un'animazione JavaScript a un sito in cui JavaScript è già occupato con altre logiche, non dovresti sorprenderti quando i due si scontrano, risultando in un'animazione "janky" o un'interfaccia "laggy".