CSS Drop Down Div анимации?

Question

Я пытался заставить мою выпадающую корзину исчезать / скользить, когда вы наводите курсор на значок корзины.(Как и в подменю)

Однако я не мастер CSS-перехода!Пробовал общие замирания с использованием элемента перехода, но он не работал.

Мой выпадающий список работает, просто отображая второй элемент div при наведении на него курсора, который имеет функции php для захвата элементов корзины пользователя и цены.

Я начинаю думать, есть ли лучший способ сделать это?

Сайт с раскрывающейся корзиной в заголовке: Мой сайт с корзиной

Мой код: 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;}

Answer 1

Вы можете использовать свойство transform, opacity и visibility вместо того, чтобы скрывать свой блок, это фактически свойства, используемые сайтом, который вы упомянули

Как в этом примере. 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;}

Answer 2

Это просто, как в 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;
}