英文:
Any way to make Tailwind rotate transition work?
问题
我正在尝试平滑旋转这个chevron-icon：
<div
class="w-[18px] ml-6 mr-2 text-slate-500 transition-all"
:class="{ 'rotate-180': store.accountMenu }"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 6L10 16l10 10"
/>
</svg>
</div>
通过使用tailwind的transition-all类和通过vue 3 condition有条件地应用的rotate-180类来实现。store.accountMenu只是一个带有布尔属性的导入的响应式函数。过渡效果仅在图标从右向左旋转回来时有效，而不是在初始从左向右旋转时。
英文:
I am trying to smoothly rotate this chevron-icon:
<div
class="w-[18px] ml-6 mr-2 text-slate-500 transition-all"
:class="{ 'rotate-180': store.accountMenu }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 6L10 16l10 10" />
</svg>
</div>
by using the tailwind transition-all class and a rotate-180 class that gets applied conditionally via vue 3 condition. store.accoutnMenu is just an imported reactive function with a boolean property. The transition works but only when the icon rotates back from right to left, not when it is supposed to initially rotate left to right.
答案1
得分: 2
尝试添加 transform 类。
我创建了一个 codepen:
<div
class="w-[18px] ml-6 mr-2 text-slate-500 过渡-all 变换"
:class="{ 'rotate-180': store.accountMenu }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 6L10 16l10 10" />
</svg>
</div>
英文:
Try adding the transform class.
I created a codepen:
<div
class="w-[18px] ml-6 mr-2 text-slate-500 transition-all transform"
:class="{ 'rotate-180': store.accountMenu }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 6L10 16l10 10" />
</svg>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论