Переход, когда не работает во Framer Motion

Я использую Framer Motion в качестве библиотеки анимации в проекте React. Я пытаюсь оживить родительский элемент после дочернего элемента, используя атрибут when. Не работает, потому чтоContentVariants а также ImgVariants работают одновременно.

коды

import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { motion } from "framer-motion";

export const ContentVariants = {
  expanded: () => ({
    width: "150px",
    transition: {
      when: "afterChildren",
      duration: 2
    }
  }),
  collapsed: () => ({
    width: "50px",
    transition: {
      when: "afterChildren",
      duration: 2
    }
  })
};

export const Content = styled(motion.div)`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: burlywood;
  padding: 30px;
  height: 500px;
`;

export const ToggleBtn = styled.button`
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  width: auto;
  align-self: flex-end;
`;

export const ImgVariants = {
  expanded: {
    width: "100px",
    scale: 1,
    transition: {
      duration: 2
    }
  },
  collapsed: {
    scale: 0.5,
    transition: {
      duration: 2
    }
  }
};

const Img = styled(motion.img)``;

class App extends Component {
  state = {
    collapsed: false
  };

  toggle = () => {
    this.setState({ collapsed: !this.state.collapsed });
  };

  render() {
    const { collapsed } = this.state;
    return (
      <div>
        <Content
          initial={collapsed ? "collapsed" : "expanded"}
          animate={collapsed ? "collapsed" : "expanded"}
          variants={ContentVariants}
        >
          <Img
            src="https://picsum.photos/200/200"
            initial={collapsed ? "collapsed" : "expanded"}
            animate={collapsed ? "collapsed" : "expanded"}
            variants={ImgVariants}
          />
          <ToggleBtn onClick={this.toggle}>toggle</ToggleBtn>
        </Content>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Если я изменю when: "afterChildren" к when: "beforeChildren" в ContentVariants, это не имеет значения. Даже если я удалюwhen атрибут, анимации выполняются одновременно.

Источник

2 ответа

Решение

В разделе распространения документации (https://www.framer.com/api/motion/animation/) говорится, что

Если у компонента движения есть дочерние элементы, изменения в варианте будут проходить вниз по иерархии компонентов. Эти изменения в варианте будут течь вниз, пока дочерний компонент не определит свое собственное свойство анимации.

Вы должны удалить animate опора из Img элементы.

https://codesandbox.io/s/gallant-goldwasser-dwiz2

Источник

Если вы установите анимацию для своего ребенка, родитель не будет передавать ему логику анимации. Таким образом, вам нужно удалитьinitial а также animate собственность от вас <Img> составная часть:

<Img
   src="https://picsum.photos/200/200"
   variants={ImgVariants}
/>

Вы можете посмотреть этот пример из официальных документов для справки: https://www.framer.com/api/motion/types/

Источник
Другие вопросы по тегам