Как анимировать уменьшение высоты через Framer Motion?

Question

[dmitry]

У меня есть компонент карточки, которая содержит в себе кнопку "показать больше", при нажатии на которую карточка будет увеличиваться по высоте. Задача анимировать высоту, с помощью Framer Motion, у меня получается анимировать только развертывание, но свертывание карточки никак не могу реализовать. Читал доку, ролики, статьи но ничего не помогает, пытался применить компонент AnimatePresence из Framer Motion, но он у меня не срабатывает или я не понял как он работает.

import { Typography, Image } from "@components/ui";
import { useTranslation } from "@hooks";
import { useState } from "react";
import { motion } from "framer-motion";

export const MentorCard = (props) => {
  const { title, text, profit, imageSrc, alt, className } = props;
  const t = useTranslation();

  //show more
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpansion = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className={className}>
      <div className="team__card-info stack column">
        <div className="team__card-image">
          <Image src={imageSrc} width="186" height="227" alt={alt} />
        </div>
        <div className="team__card-profit stack column center">
          <Typography tag="p" className="">
            {t.common.profit}
          </Typography>
          <span>{profit}</span>
        </div>
      </div>
      <motion.div
        animate={{
          height: isExpanded ? "auto" : 0,
        }}
        transition={{ duration: 0.3 }}
        className="team__card-text stack column"
      >
        <Typography tag="h3" className="team__card-title">
          {title}
        </Typography>

        <Typography tag="p" className="team__card-description p">
          {isExpanded ? text : text.slice(0, 500)}
          {text.length > 500 && (
            <button className="team__card-expanded" onClick={toggleExpansion}>
              {isExpanded ? "Свернуть" : "Читать все"}
            </button>
          )}
        </Typography>
      </motion.div>
    </div>
  );
};

Comments

[szQocks]

для это задачи, стилей будет достаточно, другие же как-то эту задачу решают без js и тем более frame-motion

[dmitry]

szQocks, Без Framer решать такую задачу было бы непросто. С помощью css можно сделать транзишн по высоте через свойство max‑height, но таким способом не получиться проанимировать изменение высоты в обратную сторону — с большей карточки на меньшую. Пришлось бы добавлять js‑скрипт. Также, так как речь идет про реакт, скорее всего пришлось бы завязываться на рефах, что тоже добавляет неудобств.

[szQocks]

dmitry, https://codepen.io/kapysta-xxl/pen/XWOMYZK?editors=1111

[dmitry]

szQocks, В вашем примере вы используете фиксированные значения, например такие как max-height, что противоестественно конечно же для моей карточки, и для большинства кейсов, так как там может добавится контент. А вот анимировать height: auto или 100% уже так не получиться, браузер должен знать, какой конечный размер высоты следует анимировать. Так что к сожалению, это не подходит.

[szQocks]

dmitry, 400px - это я для примера написал, да она там фиксированная не спорю, но как она работает - это ты не до конца выкупаешь, обычно ставлю max-height столько - сколько вообще максимально может быть блок в высоту,понимаешь ? - если у тебя блок может быть в высоту максимально 2000px - хорошо - сделай 2000px max-height, и подгони время анимации под эти 2000px и всё будет работать

P.S анимация через max-height - это не фиксированная высота блока, а фиксированная максимальная высота - ты это не путай

Answer 1

[godsplane]

<motion.div
   style={{
         height: expanded ? 'auto' : 0,
   }}
  >
</motion.div>

Comments

[dmitry]

Это не помогает (

[godsplane]

dmitry, попробуй 0 как строку

[dmitry]

godsplane, Делаю вот так, но не помогает (

<motion.div
        animate={{
          height: isExpanded ? "auto" : 0,
        }}
        style={{
          height: isExpanded ? "auto" : "0",
        }}
        transition={{ duration: 0.3 }}
        className="team__card-text stack column"
      >
        <Typography tag="h3" className="team__card-title">
          {title}
        </Typography>

        <Typography tag="p" className="team__card-description p">
          {isExpanded ? text : text.slice(0, 500)}
          {text.length > 500 && (
            <button className="team__card-expanded" onClick={toggleExpansion}>
              {isExpanded ? "Свернуть" : "Читать все"}
            </button>
          )}
        </Typography>
      </motion.div>

[godsplane]

dmitry, убери animate. хз я недавно так и делал и все работало

[dmitry]

godsplane, Без animate даже анимация развертывания не проигрывается. Если делал такое, можешь пример кода скинуть?

[godsplane]

dmitry, а да, я делал через AnimatePresence, но мб тебе такой вариант подойдет

<AnimatePresence>
                {isOpen && (
                    <>
                        {createPortal(
                            <motion.div
                                initial={{ height: 0 }}
                                animate={{ height: `auto` }}
                                exit={{ opacity: 0 }}
                                className="absolute left-0 top-full z-50 w-full bg-gray-950 md:hidden"
                            >
                                <div className="container flex flex-col gap-6 py-6">
                                    <div className="flex flex-col gap-24">
                                        <nav>
                                            <ul className="flex flex-col gap-4 font-display">
                                                {menu.map((item, index) => {
                                                    const { url, title } = item;
                                                    return (
                                                        <motion.li
                                                            initial={{
                                                                opacity: 0,
                                                                x: -20,
                                                            }}
                                                            animate={{
                                                                opacity: 1,
                                                                x: 0,
                                                            }}
                                                            exit={{
                                                                opacity: 0,
                                                                x: -20,
                                                            }}
                                                            transition={{
                                                                delay:
                                                                    index * 0.1,
                                                            }}
                                                            key={url}
                                                        >
                                                            <a href={'#' + url}>
                                                                {title}
                                                            </a>
                                                        </motion.li>
                                                    );
                                                })}
                                            </ul>
                                        </nav>
                                        <motion.div
                                            initial={{
                                                opacity: 0,
                                                x: -20,
                                            }}
                                            animate={{
                                                opacity: 1,
                                                x: 0,
                                            }}
                                            exit={{
                                                opacity: 0,
                                                x: -20,
                                            }}
                                            className="flex flex-col items-start gap-2 font-display"
                                        >
                                            <a
                                                className="link-hover"
                                                href={`tel:${phone.replace(
                                                    '/+d/',
                                                    '',
                                                )}`}
                                            >
                                                {phone}
                                            </a>
                                            <Button className="link-hover">
                                                Обсудить проект
                                            </Button>
                                        </motion.div>
                                    </div>
                                    <div className="flex items-center gap-3">
                                        {socialnetworks.map((item, index) => {
                                            const { name, link, id } = item;
                                            const Icon = SocialsIcon[name];
                                            return (
                                                <motion.a
                                                    initial={{
                                                        opacity: 0,
                                                        x: -20,
                                                    }}
                                                    animate={{
                                                        opacity: 1,
                                                        x: 0,
                                                    }}
                                                    exit={{
                                                        opacity: 0,
                                                        x: -20,
                                                    }}
                                                    transition={{
                                                        delay: index * 0.1,
                                                    }}
                                                    className="flex items-center gap-2 rounded-full bg-gray-900 p-2 font-medium capitalize"
                                                    href={link}
                                                    rel="noopener noreferrer"
                                                    target="_blank"
                                                    key={id}
                                                >
                                                    <Icon size={24} />
                                                </motion.a>
                                            );
                                        })}
                                    </div>
                                </div>
                            </motion.div>,
                            document.querySelector('header'),
                        )}
                    </>
                )}
            </AnimatePresence>