动画输入宽度从右到左框架运动

Question

我试图用动画显示我的输入，使其宽度从0到50%。为此，我使用了framer-motion。我已经成功地制作了动画，但默认情况下，它是从左到右增长的。我有没有办法让它从右向左增长？沙箱简单复制

import { motion } from "framer-motion";
import { useState } from "react";

export default function App() {
  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <button onClick={() => setToggle(!toggle)}>toggle input</button>
      <div style={{ marginTop: 25 }}>
        {toggle && (
          <motion.input
            initial={{ width: "0%" }}
            animate={{ width: "50%" }}
            transition={{ duration: 1, origin: 1 }}
          />
        )}
      </div>
    </div>
  );
}

Answer 1

当然，这不是最好的方法，但我认为修改下面的内容可以解决您的问题。添加了x，50vw = 50%的视口宽度(0vw = 0%宽度)，initial“位置”，animate x和0的结束位置以及50vw的宽度。

  <motion.input
    initial={{ width: "0vw", x: "50vw" }}
    animate={{ width: "50vw", x: 0 }}
    transition={{ duration: 1, origin: 1 }}
  />

您可以在API Documentation motion组件的Value type conversion https://www.framer.com/docs/component/##value-type-conversion下找到有关它的更多详细信息。