style: format code with Prettier and StandardJS

src/pages/motion/index.jsx

@@ -1,4 +1,4 @@
 import React, { useEffect, useState, useRef } from 'react'
 import {
   motion,
   useAnimationControls,
@@ -68,7 +68,7 @@
 ]
 
 const randomSort = (arr) => {
-  let newArr = []
+  const newArr = []
   const len = arr.length
   for (let i = 0; i < len; i++) {
     const random = Math.floor(Math.random() * arr.length)
@@ -98,7 +98,7 @@
 
   const [listLabel, setListLabel] = useState(['JavaScript', 'html', 'css', 'webAssembly'])
   const [isBig, setBigState] = useState(false)
   const [leftState, setLeftState] = useState(false)
 
   const scrollRef = useRef(null)
 
@@ -128,7 +128,7 @@
   return (
     <FixTabPanel ref={scrollRef}>
       <h2>Hi, Motion</h2>
       <motion.div
         style={{
           position: 'fixed',
           top: 0,
@@ -138,10 +138,10 @@
           backgroundColor: '#aaa',
           borderRadius: '3px',
           // scaleX: scrollYProgress,
-          scaleX: scaleX,
+          scaleX,
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 100,
           height: 100,
@@ -164,8 +164,8 @@
           rotate: 45, // 旋转45度
           opacity: 0.5, // 不透明度设置为0.5
         }}
-      ></motion.div>
+      />
       <motion.div
         transformTemplate={template}
         animate={{ rotate: 360 }}
         style={{
@@ -176,9 +176,9 @@
           rotate: 0,
           x: '200px',
         }}
-      ></motion.div>
+      />
 
       <motion.div
         style={{
           width: 100,
           height: 100,
@@ -189,10 +189,10 @@
           duration: 2,
         }}
         variants={animations}
-        initial={'hidden'}
-        animate={'show'}
-      ></motion.div>
+        initial="hidden"
+        animate="show"
+      />
       <motion.ul
         initial="hidden"
         animate="visible"
         variants={list}
@@ -203,12 +203,12 @@
         }}
         style={{ fontSize: 20 }}
       >
         <motion.li variants={item}>item1</motion.li>
         <motion.li variants={item}>item2</motion.li>
         <motion.li variants={item}>item3</motion.li>
       </motion.ul>
       {['vue', 'react', 'angular'].map((item, i) => (
         <motion.p style={{ fontSize: 20 }} key={i} custom={i + 0.3} animate="visible" variants={variantsText}>
           {item}
         </motion.p>
       ))}
@@ -220,7 +220,7 @@
           gap: 30,
         }}
       >
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -242,7 +242,7 @@
           onClick={() => {
             setRotate(!isRotated)
           }}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
@@ -265,7 +265,7 @@
         </div>
       </div>
 
       <motion.div
         style={{
           display: 'flex',
           flexDirection: 'column',
@@ -279,7 +279,7 @@
         }}
         ref={constraintsRef}
       >
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -296,20 +296,17 @@
           onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
           onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
           onDirectionLock={(axis) => console.log('axis', axis)}
-          dragSnapToOrigin={true}
+          dragSnapToOrigin
           // dragConstraints={{ left: 0, right: 300 }}
           dragConstraints={constraintsRef}
-          // dragElastic={false}
-          // dragElastic={0.8}
-          // dragPropagation={false}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
             gap: 20,
           }}
         >
           <motion.div
             style={btnStyle}
             onTap={() => {
               controller.start({ scale: 1.2 })
@@ -317,7 +314,7 @@
           >
             大
           </motion.div>
           <motion.div
             style={btnStyle}
             onTap={() => {
               controller.start({ rotate: 45 })
@@ -325,7 +322,7 @@
           >
             旋转
           </motion.div>
           <motion.div
             style={btnStyle}
             onClick={() => {
               controller.start({ opacity: 0.2 })
@@ -333,7 +330,7 @@
           >
             透明度
           </motion.div>
           <motion.div
             style={btnStyle}
             onTap={() => {
               controller.start({ opacity: 1, rotate: 0, scale: 1.0 })
@@ -353,7 +350,7 @@
           gap: 52,
         }}
       >
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -379,14 +376,14 @@
             setIsAnimation(false)
             console.log('Completed animating', definition)
           }}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
             gap: 20,
           }}
         >
           <motion.div
             style={{
               ...btnStyle,
               pointerEvents: isAnimation ? 'none' : 'auto',
@@ -438,7 +435,7 @@
                 }}
                 key={i}
               >
                 <motion.div
                   style={{
                     width: 100,
                     height: 100,
@@ -498,7 +495,7 @@
           marginTop: 30,
         }}
       >
         <motion.div
           style={{
             width: 100,
             height: 100,
@@ -512,10 +509,10 @@
             duration: 1,
             repeat: Infinity,
           }}
-        ></motion.div>
+        />
       </div>
 
       <motion.div
         style={{
           width: 180,
           backgroundColor: '#333',
@@ -529,7 +526,7 @@
           setButtonState(!buttonRight)
         }}
       >
         <motion.div
           layout // 设置在白色圆球元素上，即子元素上 <-
           style={{
             width: 60,
@@ -537,11 +534,11 @@
             backgroundColor: 'white',
             borderRadius: 60,
           }}
-        ></motion.div>
+        />
       </motion.div>
 
       <section style={{ fontSize: 30 }}>scrollDirection: {scrollDirection}</section>
       <motion.div
         style={{
           width: 200,
           height: 100,
@@ -551,8 +548,8 @@
           x,
           rotate,
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 200,
           height: 100,
@@ -560,7 +557,7 @@
           borderRadius: '20px',
           scaleX,
         }}
-      ></motion.div>
+      />
 
       <div
         style={{
@@ -573,7 +570,7 @@
           fontWeight: 'bold',
         }}
       >
         <motion.div
           style={{
             display: 'flex',
             flexDirection: 'column',
@@ -583,7 +580,7 @@
         >
           {listLabel.map((item) => {
             return (
               <motion.div
                 layout
                 style={{
                   width: 200,
@@ -600,7 +597,7 @@
               </motion.div>
             )
           })}
           <motion.div
             style={{
               width: 160,
               height: 50,
@@ -635,7 +632,7 @@
           fontSize: 16,
         }}
       >
         <motion.div
           style={{
             width: buttonRight ? 160 : 200,
             height: 40,
@@ -650,9 +647,9 @@
           onTap={() => {
             setButtonState(!buttonRight)
           }}
-        ></motion.div>
+        />
 
         <motion.div
           style={{
             width: 120,
             height: 40,
@@ -670,7 +667,7 @@
           onTap={() => {
             setButtonState(!buttonRight)
           }}
-        ></motion.div>
+        />
         <span
           style={{
             color: '#aaa',
@@ -688,7 +685,7 @@
           alignItems: 'center',
         }}
       >
         <motion.div
           style={{
             backgroundColor: '#333',
             borderRadius: '10px',
@@ -701,7 +698,7 @@
           layout
         >
           <LayoutGroup>
             <motion.div
               layout
               style={{
                 width: isBig ? 200 : 60,
@@ -719,9 +716,9 @@
                 setBigState(!isBig)
               }}
             >
               <motion.span layout>click</motion.span>
             </motion.div>
             <motion.div
               layout
               style={{
                 width: 60,
@@ -729,8 +726,8 @@
                 backgroundColor: '#fff',
                 borderRadius: 10,
               }}
-            ></motion.div>
+            />
             <motion.div
               layout
               style={{
                 width: 60,
@@ -738,7 +735,7 @@
                 backgroundColor: '#fff',
                 borderRadius: 10,
               }}
-            ></motion.div>
+            />
           </LayoutGroup>
         </motion.div>
       </div>