悬停时跳跃答案

【问题标题】：Jumping when hover悬停时跳跃
【发布时间】：2021-12-07 22:44:36
【问题描述】：

我想在 CSS 中实现一个简单的悬停动画，但是在悬停时，动画会跳跃/轻弹，让它看起来很傻。有没有办法避免这种情况？我希望下拉图像消失，标签滑回原来的位置。

.elementor-widget-wp-widget-woocommerce_product_categories .product-categories li > a:before {
 background: url("/dropdown.svg") no-repeat center/contain;
 content: "";
 border: none;
 display: inline-block;
 height: 1em;
 opacity: 0;
 transform: rotate(-90deg);
 transition-property: margin,opacity;
 width: 1em;
}

.elementor-widget-wp-widget-woocommerce_product_categories .product-categories li > a:hover::before {
  opacity: 1;
  transition: .3s ease all;
}

.product-categories li > a:hover{
  margin-left: 30px; 
}

.elementor-widget-wp-widget-woocommerce_product_categories .product-categories li a:after {
   content: none;
}

【问题讨论】：

margin占实际空间，可以使用translate移动不跳转

标签： css animation hover elementor

【解决方案1】：

始终使用 transform: 代替 css 动画的边距，它们不会改变占用的空间。

例如你的代码应该是：

.elementor-widget-wp-widget-woocommerce_product_categories .product-categories li > a:before {
 transform: translateX(0px) rotate(-90deg);
 transition-property: transform,opacity;
}


.product-categories li > a:hover{
  transform: translateX(-30px) rotate(-90deg); 
}

我们在两者中保持rotate 属性相同，因为我假设您不希望在这种情况下更改它。

【讨论】：