英文:
Can i disactivate framer motion whileHover when button is disabled?
问题
我有一个包含两个按钮的项目计数组件，当按钮被禁用时，我想要禁用 whileHover。这可能吗？
<div className="flex space-x-5">
<motion.button
whileHover={{ scale: 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={decrement}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={!stock || count <= 1}
>
-
</motion.button>
<span>{count}</span>
<motion.button
whileHover={{ scale: 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={increment}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={!stock}
>
+
</motion.button>
</div>
谢谢。我还没有找到解决方案。
英文:
i have an item count component with 2 buttons, and i want to disable the whileHover when the buttons are disabled. its possible?
<div className="flex space-x-5">
<motion.button
whileHover={{ scale: 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={decrement}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={!stock || count <= 1}
>
-
</motion.button>
<span>{count}</span>
<motion.button
whileHover={{ scale: 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={increment}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={!stock}
>
+
</motion.button>
</div>
Thanks.
I haven't found any solution
答案1
得分: 0
以下是翻译好的代码部分：
const isDisableDecrement = !stock || count <= 1
const isDisableIncrement = !stock
<div className="flex space-x-5">
<motion.button
whileHover={{ scale: isDisableDecrement ? 1 : 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={decrement}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={isDisableDecrement}
>
-
</motion.button>
<span>{count}</span>
<motion.button
whileHover={{ scale: isDisableIncrement ? 1 : 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={increment}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={isDisableIncrement}
>
+
</motion.button>
</div>
希望对你有所帮助。
英文:
maybe you can try this
const isDisableDecrement = !stock || count <= 1
const isDisableIncrement = !stock
<div className="flex space-x-5">
<motion.button
whileHover={{ scale: isDisableDecrement ? 1 : 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={decrement}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={isDisableDecrement}
>
-
</motion.button>
<span>{count}</span>
<motion.button
whileHover={{ scale: isDisableIncrement ? 1 : 1.1 }}
transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
onClick={increment}
className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
disabled={isDisableIncrement}
>
+
</motion.button>
</div>
There are better solutions than this, but you can try it out.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论