Framer Motion

    Official

    A production-ready motion library for React that makes creating animations simple and delightful.

    รายละเอียด

    4.9/ 5.0 (3521 ratings)
    15ครั้งที่เข้าชม
    React
    Animation
    UI
    Motion

    ให้คะแนนไลบรารีนี้

    เข้าสู่ระบบเพื่อให้คะแนนไลบรารีนี้

    ตัวอย่างการเริ่มต้นใช้งาน

     Framer Motion คือไลบรารี React Native ที่ให้ส[control_735] หน้าต่าง Animate ใน Framer Motion ใช้แบบดัดแบบแผ่นรวม Motion. В내บริการ Framer Motion ถูกใช้เพื่อสร้างแหล่งข้อมูลสำหรับความเมาะที่นำเสนอ Condition และฟังก์ชันใน React ซึ่งจะสามารถสอดคล้องกับสภาพแวดล้อม React ได้และช่วยในการสร้างแอนิเมชันได้ดีขึ้น
    
    เราจะสร้างแอนิเมชันของButtonที่ปริศนาظück เมื่อ onPress ได้ถูกเรียกไว้ ซึ่งการปริศนาด้วย Framer Motion จะทำให้เมื่อ Movement จะได้มาแทกกันแบบสมยรณ์
    
    ```jsx
    import { motion } from 'framer-motion';
    
    const AnimatedButton = () => {
      return (
        <motion.button
          whileTap={{ scale: 0.8, opacity: 0.5 }}
          transition={{ duration: 0.2 }}
          onTapStart={() => console.log('Tap Started')}
          onTapEnd={() => console.log('Tap Ended')}
        >
          Click me
        </motion.button>
      );
    }
    
    export default AnimatedButton;
    ```
    
    ใน赤ตรร біาสข้ามา글ราบ เราสร้างค่า menuItem ที่ประกอบด้วยค่าเมทด้าว name และ value ซึ่งจะถูกแสดงไพบาลบนหน้าเว็บเมื่อเมนูถูกปุ่มเมนูกดจริง
    
    ```jsx
    import { motion } from 'framer-motion';
    
    const MenuItem = ({ name, value }) => {
      return (
        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 1 }}
        >
          {name}: {value}
        </motion.div>
      );
    }
    
    const DropdownMenu = () => {
      const menuItems = [
        { name: 'Name', value: 'John Doe' },
        { name: 'Email', value: 'johndoe@example.com' },
        { name: 'Phone', value: '(123) 456-7890' },
      ];
    
      return (
        <motion.div
          initial={{ scaleY: 0, opacity: 0 }}
          animate={{ scaleY: 1, opacity: 1 }}
          transition={{ duration: 0.2, delay: 0.3 }}
          onMouseEnter={() => console.log('Hovered')}
          onMouseLeave={() => console.log('Hover exited')}
        >
          <button>Show Menu</button>
          <div className='menu'>
            {menuItems.map(({ name, value }) => (
              <MenuItem key={name} name={name} value={value} />
            ))}
          </div>
        </motion.div>
      );
    }
    
    export default DropdownMenu;
    ```

    นี่เป็นเพียงตัวอย่างพื้นฐาน สำหรับเอกสารฉบับเต็ม โปรดเยี่ยมชมเว็บไซต์ทางการของไลบรารี

    🤖 คำถามที่พบบ่อยจาก AI

    คำตอบที่สร้างโดย AI สำหรับไลบรารีนี้ โดยผ่านการโหวตจากชุมชนแล้ว

    3 คำตอบจาก AI • คลิกเพื่อดูรายละเอียด

    ถาม AI เกี่ยวกับ Framer Motion

    เข้าสู่ระบบเพื่อถามคำถามและรับคำตอบจาก AI

    พูดคุยในชุมชน

    ร่วมแบ่งปันความคิด, กรณีการใช้งาน, หรือถามคำถามเกี่ยวกับ Framer Motion

    การสนทนาล่าสุด

    ยังไม่มีการสนทนาเกี่ยวกับ Framer Motion

    มาเป็นคนแรกที่เริ่มการสนทนาสิ!