Question

当您将鼠标悬停在购物车图标上时，我一直试图让我的下拉车淡出/滑动。（像子菜单一样）

但是，我不是CSS转换向导！尝试使用过渡元素进行泛型淡化，但它没有用。

我的下拉工作只是当你将鼠标悬停在它上面时显示第二个div - 它具有获取用户购物车项目的PHP功能。价。

我开始考虑是否有更好的方法来做到这一点？

网站上标有下拉菜单：My Website with Cart

购物车下载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;}

Answer 1

它在css中很简单。您需要使用帮助fade，visibility和opacity属性为效果transform创建关键帧动画。在opacity的帮助下，您可以设置隐藏的div的初始状态，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;
}

Answer 2

您可以使用转换属性，不透明度和可见性，而不是隐藏您的框，这实际上是您提到的网站使用的属性

就像这个例子一样。https://jsfiddle.net/RACCH/ypqvtnem/

.minicart-dropdown {width: 300px;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;transform: translateY(25%);
    opacity: 0;transition: all 1s;visibility:hidden;}

.shopping-cart:hover .minicart-dropdown {opacity:1;transform:translateY(0%);visibility:visible;}

CSS下载Div动画？

2 个答案: