CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Liam Geary
Liam Geary

Reputation: 139

CSS Drop Down Div animations?

I have been trying to get my drop down cart to fade/slide up when you hover over the cart icon. (Like the submenus)

However, I am not a CSS transition wizard! Have tried generic fades using transition element but it did not work.

My Drop down works by just displaying a second div when you hover over it - which has the php functions to grab the users cart items & price.

I am beginning to think whether there is a much better way to do this?

Website with drop down cart in header: My Website with Cart

My Code: https://jsfiddle.net/em2bvxvx/

Cart Drop Down 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;}

Upvotes: 0

Views: 9318

Answers (2)

Renzo Calla
Renzo Calla

Reputation: 7696

You could use transform property, opacity, and visibility, instead of hiding your box, this is actually the properties used by the site that you mentioned

Like this 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;
}

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

It's simple as that in CSS. You need to create a keyframe animation for the effect fade with the help visibility, opacity and transform properties. With the help of opacity you can set your initial state of your div to be hidden and transform can help you push your elements either X or Y axis.

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

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

Upvotes: 5

Related Questions