當(dāng)你懸停在購物車圖標(biāo)上時，我一直試圖讓我的下拉購物車淡出/向上滑動。(像子菜單一樣)

但是，我不是CSS過渡精靈！已經(jīng)嘗試了使用過渡元素的通用淡入淡出，但它不起作用。

我的下拉菜單的工作原理是當(dāng)你懸停在它上面時顯示第二個div --它有php函數(shù)來獲取用戶的購物車商品。價(jià)格。

我開始考慮是否有更好的方法來做這件事？

標(biāo)題中帶有下拉購物車的網(wǎng)站:我的帶有購物車的網(wǎng)站

我的代碼:https://jsfiddle.net/em2bvxvx/

購物車下拉CSS:

.mini-cart {background-color:red;background-repeat: no-repeat;background-size: 22px 22px;width: 22px;height: 22px;font-size: 10px;padding-top: 6px;padding-left: 7.4px;margin-top: 13px;margin-left: 14px;color: #000;}

    .shopping-cart {position: relative;display: inline-block;}

    .minicart-dropdown {width: 300px;display: none;background-color: #fff;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;right: 0px;padding: 20px;top: 40px;}

    .minicart-dropdown .size-woocommerce_thumbnail {height: auto;max-width: 50px;}

    .minicart-dropdown a {color: #fff;padding: 12px 16px;text-decoration: none;display: block;}

    .minicart-dropdown a:hover {background-color: #ddd}

    .shopping-cart:hover .minicart-dropdown {display: block;}

    .minicart-dropdown > .cart-buttons {display: flex;color: #fff;margin-top: 20px;}

    .minicart-dropdown > .cart-buttons > .minicart-vb, .minicart-co {width:49%; text-align:center;background-color: #01273a!important;cursor:pointer;}

    .minicart-dropdown > .cart-buttons > .minicart-co {margin-left: 15px;}

    .minicart-dropdown .content {margin-top: 20px;}

就像CSS中那樣簡單。您需要創(chuàng)建一個關(guān)鍵幀動畫的效果淡化與幫助可見性，不透明度和變換屬性。在不透明度的幫助下，你可以將你的div的初始狀態(tài)設(shè)置為隱藏，transform可以幫助你將元素推至X軸或Y軸。

@keyframes fade {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown {
   animation: fade 2s linear forwards;
}

你可以使用變換屬性、不透明度和可見性，而不是隱藏你的框，這實(shí)際上是你提到的站點(diǎn)所使用的屬性

比如這個例子. https://js fiddle . net/RACCH/ypqvtnem/

.minicart-dropdown {
    width: 300px;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0;
    padding: 20px;
    top: 40px;
    transform: translateY(25%);
    opacity: 0;
    transition: all 1s;
    visibility: hidden;
}
    
.shopping-cart:hover .minicart-dropdown {
    opacity: 1;
    transform: translateY(0%);
    visibility: visible;
}