Question

我已经查看了这个链接http://www.greywyvern.com/?post=337#来构建我的代码，但我无法想象如何让它很好地工作。

我正在我的商店进行试用，例如此网址产品页面：https://www.tresor-ethnique.com/collections/apache/products/boucles-oreilles-plumes-ceremoniales

我想要的是：

当我添加到购物车或点击标题中的“Panier”（表示“购物车”）时，我希望我的购物车能够在没有任何转换的情况下立即淡入

如果我将这些按钮（或鼠标悬挂在购物车上），我想在消失之前2.5秒将线性淡出动画。

使用以下代码选择购物车按钮：

.header-cart-txt

购物车选择了这个：

.header-cart.invisible

至于添加到购物车按钮，我没有考虑过，因为当我点击它时我的主题已经使标题购物车弹出

所以这些是我做的不同的试验：

试验1：

.header-cart-txt > .header-cart.invisible {
  transition: visibility 0s linear 1.5s, opacity 1.5s linear !important;
}
.header-cart-txt:hover > .header-cart.invisible {
  transition-delay: 0s !important;
}

试验2

.header-cart-txt > .header-cart.invisible {
  opacity: 0 !important;
  -webkit-transition: opacity 2.5s linear !important;
}
.header-cart-txt:hover > .header-cart.invisible {
  opacity: 1 !important;
}

试验3

.header-cart.invisible {
  display:none !important;
  opacity: 0 !important;
  -webkit-transition: opacity 2.5s linear !important;
}
.header-cart.invisible:hover {
  display:block !important;
  opacity: 1 !important;
}

但我无法想象什么不起作用无论我尝试什么，我都无法显示这个淡出动画。我不确定原因

试用版4是最有趣的，它工作得很好但是由于某种原因，当点击按钮ATC并将鼠标悬停在“Panier”按钮上时，购物车将不再显示

试验4

.header-cart.invisible {
    position: fixed !important;
    top: 25px !important;
    visibility: hidden !important;
    transition: visibility 0s linear 1.5s, opacity 1.5s linear !important;
}
.header-cart.invisible:hover {
  visibility: visible !important;
  opacity:1 !important;
  transition-delay: 0s !important;
}

.header-cart-txt:hover > .header-cart.invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

#add_to_cart_btn.button:active > .header-cart.invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

任何有用的想法？非常感谢你:)）

Answer 1

你过度复杂了。（你发现自己用!important规则乱扔你的CSS，是时候退后一步重新开始了。）

将transition规则视为“转换到此状态应该花费的时间” - 如果您希望它在一个方向上立即生效，则只需将该状态设置为零。 / p>

jQuery在这里只用于打开和关闭类名;重要的是CSS。我使用了背景颜色，但当然同样适用于任何过渡：

$('button').click(function() {
    $(this).toggleClass('on')
});

button {background-color: #FFF; transition: 2.5s}

button.on {background-color:#00F; transition: 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

（前缀-webkit-transition的供应商此时已经过时; safe使用标准transition。

淡入淡出动画

1 个答案: