扩展元素之间的过渡

Question

I have another question.

I hope it does not count as dumb question again. most beginner questions seem to been seen as dumb.

Anyway I am trying to have the transition between clicking cards more smooth.

Currently you can click on a card and it expands down and it is smooth when you click on the same card, but if you click on one card then a diferent one it is not smoth expanding the elements. Mostly when the cards are next to each other in full screen

 var $cell = $(".card"); //open and close card when clicked on card $cell.find(".js-expander").click(function (e) { e.stopImmediatePropagation(); var $thisCell = $(this).closest(".card"); if ($thisCell.hasClass("is-collapsed")) { $cell.not($thisCell).removeClass("is-expanded").addClass("is-collapsed"); //$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive'); $thisCell.removeClass("is-collapsed").addClass("is-expanded"); // if ($cell.not($thisCell).hasClass("is-inactive")) { // //do nothing // } else { // //$cell.not($thisCell).addClass('is-inactive'); // } } else { $thisCell.removeClass("is-expanded").addClass("is-collapsed"); $cell.not($thisCell).removeClass("is-inactive"); } }); $cell.find(".card__expander").click(function (e) { e.stopImmediatePropagation(); }); //close card when click on cross $cell.find(".js-collapser").click(function () { var $thisCell = $(this).closest(".card"); $thisCell.removeClass("is-expanded").addClass("is-collapsed"); $cell.not($thisCell).removeClass("is-inactive"); });

 * { box-sizing: border-box; } body { background: #eceef1; font-family: "Slabo 27px", serif; color: #333a45; }.wrapper { margin: 5em auto; max-width: 1000px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }.header { padding: 30px 30px 0; text-align: center; }.header__title { margin: 0; text-transform: uppercase; font-size: 2.5em; font-weight: 500; line-height: 1.1; }.header__subtitle { margin: 0; font-size: 1.5em; color: #949fb0; font-family: "Yesteryear", cursive; font-weight: 500; line-height: 1.1; }.cards { padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; }.card { margin: 15px; width: calc((100% / 3) - 30px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media screen and (max-width: 991px) {.card { width: calc((100% / 2) - 30px); } } @media screen and (max-width: 767px) {.card { width: 100%; } }.card:hover.card__inner { background-color: #1abc9c; -webkit-transform: scale(1.05); transform: scale(1.05); }.card__inner { width: 100%; padding: 30px; position: relative; cursor: pointer; background-color: #949fb0; color: #eceef1; font-size: 1.5em; text-transform: uppercase; text-align: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }.card__inner:after { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }.card__inner.fa { width: 100%; margin-top: 0.25em; }.card__expander { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background-color: #333a45; width: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; color: #eceef1; font-size: 1.5em; }.card__expander.fa { font-size: 0.75em; position: absolute; top: 10px; right: 10px; cursor: pointer; }.card__expander.fa:hover { opacity: 0.9; }.card.is-collapsed.card__inner:after { content: ""; opacity: 0; }.card.is-collapsed.card__expander { max-height: 0; min-height: 0; overflow: hidden; margin-top: 0; opacity: 0; }.card.is-expanded.card__inner { background-color: #1abc9c; }.card.is-expanded.card__inner:after { content: ""; opacity: 1; display: block; height: 0; width: 0; position: absolute; bottom: -30px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #333a45; }.card.is-expanded.card__inner.fa:before { content: "\f115"; }.card.is-expanded.card__expander { max-height: 1000px; min-height: 200px; overflow: visible; margin-top: 30px; opacity: 1; }.card.is-expanded:hover.card__inner { -webkit-transform: scale(1); transform: scale(1); }.card.is-inactive.card__inner { pointer-events: none; opacity: 0.5; }.card.is-inactive:hover.card__inner { background-color: #949fb0; -webkit-transform: scale(1); transform: scale(1); } @media screen and (min-width: 992px) {.card:nth-of-type(3n + 2).card__expander { margin-left: calc(-100% - 30px); }.card:nth-of-type(3n + 3).card__expander { margin-left: calc(-200% - 60px); }.card:nth-of-type(3n + 4) { clear: left; }.card__expander { width: calc(300% + 60px); } } @media screen and (min-width: 768px) and (max-width: 991px) {.card:nth-of-type(2n + 2).card__expander { margin-left: calc(-100% - 30px); }.card:nth-of-type(2n + 3) { clear: left; }.card__expander { width: calc(200% + 30px); } } a { color: #35a785; text-decoration: none; } /* -------------------------------- -------------------- Main components -------------------------------- */ header { height: 200px; line-height: 200px; text-align: center; background-color: #5e6e8d; color: #fff; } header h1 { font-size: 20px; font-size: 1.25rem; } /*.cd-popup-trigger { display: block; width: 170px; height: 50px; line-height: 50px; margin: 3em auto; text-align: center; color: #FFF; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; border-radius: 50em; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); } /* -------------------------------- xpopup -------------------------------- */.cd-popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(94, 110, 141, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; z-index: 1; }.cd-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; }.cd-popup-container { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 0.25em 0.25em 0.4em 0.4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -webkit-transform: translatex(-400px); -moz-transform: translatex(-400px); -ms-transform: translatex(-400px); -o-transform: translatex(-400px); transform: translatex(-400px); /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; }.cd-popup-container p { padding: 0px; margin: 0px; }.cd-popup-container.cd-popup-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }.cd-popup-container.cd-popup-close::before, .cd-popup-container.cd-popup-close::after { content: ""; position: absolute; top: 12px; width: 14px; height: 3px; background-color: #8f9cb5; }.cd-popup-container.cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 8px; }.cd-popup-container.cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px; }.is-visible.cd-popup-container { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrappeer"> <div class="cards"> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander <a href="#0" id="pop1btn" class="cd-popup-trigger">View Pop-up 1</a> </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander <a href="#0" class="cd-popup-trigger">View Pop-up 2</a> </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander <a href="#0" class="cd-popup-trigger">View Pop-up 3</a> </div> </div> </div> </div>

Answer 1

A little timeout value will help. First I check to see if there are any expanded and set a timeout MS number: let timeout = $('.is-expanded').length > 0? 200: 0 let timeout = $('.is-expanded').length > 0? 200: 0 If there is something expanded, the timeout will be 200 miliseconds.

Then we set the expanding element in a timeout, which will be zero if there is nothing currently expanded:

setTimeout(() => {
      $thisCell.removeClass("is-collapsed").addClass("is-expanded");
    }, timeout)

You can adjust the timeout value

 var $cell = $(".card"); //open and close card when clicked on card $cell.find(".js-expander").click(function(e) { e.stopImmediatePropagation(); var $thisCell = $(this).closest(".card"); if ($thisCell.hasClass("is-collapsed")) { let timeout = $('.is-expanded').length > 0? 200: 0 $cell.not($thisCell).removeClass("is-expanded").addClass("is-collapsed"); //$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive'); setTimeout(() => { $thisCell.removeClass("is-collapsed").addClass("is-expanded"); }, timeout) // if ($cell.not($thisCell).hasClass("is-inactive")) { // //do nothing // } else { // //$cell.not($thisCell).addClass('is-inactive'); // } } else { $thisCell.removeClass("is-expanded").addClass("is-collapsed"); $cell.not($thisCell).removeClass("is-inactive"); } }); $cell.find(".card__expander").click(function(e) { e.stopImmediatePropagation(); }); //close card when click on cross $cell.find(".js-collapser").click(function() { var $thisCell = $(this).closest(".card"); $thisCell.removeClass("is-expanded").addClass("is-collapsed"); $cell.not($thisCell).removeClass("is-inactive"); });

 * { box-sizing: border-box; } body { background: #eceef1; font-family: "Slabo 27px", serif; color: #333a45; }.wrapper { margin: 5em auto; max-width: 1000px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }.header { padding: 30px 30px 0; text-align: center; }.header__title { margin: 0; text-transform: uppercase; font-size: 2.5em; font-weight: 500; line-height: 1.1; }.header__subtitle { margin: 0; font-size: 1.5em; color: #949fb0; font-family: "Yesteryear", cursive; font-weight: 500; line-height: 1.1; }.cards { padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; }.card { margin: 15px; width: calc((100% / 3) - 30px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media screen and (max-width: 991px) {.card { width: calc((100% / 2) - 30px); } } @media screen and (max-width: 767px) {.card { width: 100%; } }.card:hover.card__inner { background-color: #1abc9c; -webkit-transform: scale(1.05); transform: scale(1.05); }.card__inner { width: 100%; padding: 30px; position: relative; cursor: pointer; background-color: #949fb0; color: #eceef1; font-size: 1.5em; text-transform: uppercase; text-align: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }.card__inner:after { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }.card__inner.fa { width: 100%; margin-top: 0.25em; }.card__expander { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background-color: #333a45; width: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; color: #eceef1; font-size: 1.5em; }.card__expander.fa { font-size: 0.75em; position: absolute; top: 10px; right: 10px; cursor: pointer; }.card__expander.fa:hover { opacity: 0.9; }.card.is-collapsed.card__inner:after { content: ""; opacity: 0; }.card.is-collapsed.card__expander { max-height: 0; min-height: 0; overflow: hidden; margin-top: 0; opacity: 0; }.card.is-expanded.card__inner { background-color: #1abc9c; }.card.is-expanded.card__inner:after { content: ""; opacity: 1; display: block; height: 0; width: 0; position: absolute; bottom: -30px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #333a45; }.card.is-expanded.card__inner.fa:before { content: "\f115"; }.card.is-expanded.card__expander { max-height: 1000px; min-height: 200px; overflow: visible; margin-top: 30px; opacity: 1; }.card.is-expanded:hover.card__inner { -webkit-transform: scale(1); transform: scale(1); }.card.is-inactive.card__inner { pointer-events: none; opacity: 0.5; }.card.is-inactive:hover.card__inner { background-color: #949fb0; -webkit-transform: scale(1); transform: scale(1); } @media screen and (min-width: 992px) {.card:nth-of-type(3n + 2).card__expander { margin-left: calc(-100% - 30px); }.card:nth-of-type(3n + 3).card__expander { margin-left: calc(-200% - 60px); }.card:nth-of-type(3n + 4) { clear: left; }.card__expander { width: calc(300% + 60px); } } @media screen and (min-width: 768px) and (max-width: 991px) {.card:nth-of-type(2n + 2).card__expander { margin-left: calc(-100% - 30px); }.card:nth-of-type(2n + 3) { clear: left; }.card__expander { width: calc(200% + 30px); } } a { color: #35a785; text-decoration: none; } /* -------------------------------- -------------------- Main components -------------------------------- */ header { height: 200px; line-height: 200px; text-align: center; background-color: #5e6e8d; color: #fff; } header h1 { font-size: 20px; font-size: 1.25rem; } /*.cd-popup-trigger { display: block; width: 170px; height: 50px; line-height: 50px; margin: 3em auto; text-align: center; color: #FFF; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; border-radius: 50em; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); } /* -------------------------------- xpopup -------------------------------- */.cd-popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(94, 110, 141, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; z-index: 1; }.cd-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; }.cd-popup-container { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 0.25em 0.25em 0.4em 0.4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -webkit-transform: translatex(-400px); -moz-transform: translatex(-400px); -ms-transform: translatex(-400px); -o-transform: translatex(-400px); transform: translatex(-400px); /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; }.cd-popup-container p { padding: 0px; margin: 0px; }.cd-popup-container.cd-popup-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }.cd-popup-container.cd-popup-close::before, .cd-popup-container.cd-popup-close::after { content: ""; position: absolute; top: 12px; width: 14px; height: 3px; background-color: #8f9cb5; }.cd-popup-container.cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 8px; }.cd-popup-container.cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px; }.is-visible.cd-popup-container { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrappeer"> <div class="cards"> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander <a href="#0" id="pop1btn" class="cd-popup-trigger">View Pop-up 1</a> </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander <a href="#0" class="cd-popup-trigger">View Pop-up 2</a> </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander <a href="#0" class="cd-popup-trigger">View Pop-up 3</a> </div> </div> </div> </div>