Bootstrap CSS下拉分区动画？

ehxuflar 于 2023-06-04 发布在 Bootstrap

关注(0)|答案(2)|浏览(213)

我一直试图让我的下拉购物车褪色/滑动时，你悬停在购物车图标。（如子菜单）
但是，我不是一个CSS转换向导！尝试过使用过渡元素的通用淡入淡出，但不起作用。
我的下拉菜单的工作原理是，当你把鼠标悬停在它上面时，它只显示第二个div--它有php函数来抓取用户购物车中的物品和价格。
我开始思考是否有更好的方法来做到这一点？
标题中带有下拉式购物车的网站：My Website with Cart
My Code：
购物车下拉菜单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;}

twitter-bootstrap

来源：https://stackoverflow.com/questions/50330659/css-drop-down-div-animations

2条答案

按热度按时间

niwlg2el1#

在CSS中就这么简单。您需要使用帮助visibility、opacity和transform属性为效果fade创建关键帧动画。在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;
}

赞(0）回复(0）举报 2023-06-04

ktca8awb2#

你可以使用transform属性，opacity和visibility，而不是隐藏你的盒子，这实际上是你提到的网站使用的属性
喜欢这个example.https://jsfiddle.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;
}

赞(0）回复(0）举报 2023-06-04

我来回答

Bootstrap CSS下拉分区动画？

2条答案

相关问题

热门标签

最新问答