Блог

Я пытаюсь установить display:none на родительском элементе после завершения анимации перемещения дочерних элементов. Мои li элементы исчезают, и родительский ul файл должен затем обновиться до display:none

Я могу установить задержку при переходе, но пытаюсь использовать свойство when. Я пытался:

 const variants = {
  open: {
      display: 'block',
      transition: {
          staggerChildren: 0.17,
          delayChildren: 0.2,
      }
  },
  closed: {
      display: 'none',
      transition: {
          staggerChildren: 0.05,
          staggerDirection: -1,
          display: {
            when: "afterChildren" // delay: 1 - this will work
          }
      }
  }
};
  

Очевидно, что я получаю неправильный синтаксис или не могу использоваться так, как я намереваюсь.

Демонстрация в песочнице

 import * as React from "react";
import { render } from "react-dom";
import {motion, useCycle} from 'framer-motion';

const ulVariants = {
  open: {
      display: 'block',
      visibility: 'visible',
      transition: {
          staggerChildren: 0.17,
          delayChildren: 0.2,
      }
  },
  closed: {
      display: 'none',
      transition: {
          staggerChildren: 0.05,
          staggerDirection: -1,
          display: {
            when: "afterChildren" // delay: 1 - will work
          }
      }
  }
};

const liVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
        y: {stiffness: 1000, velocity: -100}
    }
  },
  closed: {
      y: 50,
      opacity: 0,
      transition: {
          y: {stiffness: 1000}
      }
  }
}

const Item = (props) => (
  <motion.li
    variants={liVariants}
  >
    {props.name}
  </motion.li>
)

const App = () => {
  const [isOpen, toggleOpen] = useCycle(false, true);
  return (
    <>
      <button onClick={toggleOpen}>Toggle Animation</button>
      <motion.ul
        variants={ulVariants}
        animate={isOpen ? 'open': 'closed'}
      >
          {Array.from(['vader', 'maul', 'ren']).map((item, index) => (
            <Item key={item} {...{name: item}} />
          ))}
      </motion.ul>
    </>
  );
};

render(<App />, document.getElementById("root"));
  

when должно быть свойством transition объекта, а не display .

Кажется, это работает (если я не неправильно понимаю, что вы пытаетесь сделать):

 closed: {
  display: 'none',
  transition: {
      staggerChildren: 0.05,
      staggerDirection: -1,
      when: "afterChildren"
  }
}
  

Code Sandbox

Вы можете использовать

 <motion.div
  animate={{
    transitionEnd: {
      display: "none",
    },
  }}
/>
  

При анимации с использованием неанимируемого значения, такого как «блок», это значение будет установлено мгновенно. Установив это значение в transitionEnd, это значение будет установлено в конце анимации.

источник:https://www.framer.com/docs/component