javascript - CSS transition cutting off early -
i'm having issue css transitions being cut off , i'm not sure why it's happening. think has transition on child element because if remove code makes child elements transition, container's transition fine.
the code kind of long , i'm using library called baraja that's supposed allow me transition between elements if cards.
this structure of relevant html:
<ul id="cards" class="baraja-container"> <li id="usa-germany" class="card"> <div id="room-info"> <h1 id="room-name">usa vs. germany</h1> <p class="room-description"> live game discussion berkeley alumni. let's go america! </p> </div> <div id="thumbnails-container"> <div id="thumb-0" class="thumb"> <div id="message-0" class="message-popup first"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-1" class="thumb"> <div id="message-1" class="message-popup top"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-2" class="thumb"> <div id="message-2" class="message-popup"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-3" class="thumb"> <div id="message-3" class="message-popup"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-4" class="thumb"> <div id="message-4" class="message-popup top right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-5" class="thumb"> <div id="message-5" class="message-popup top right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> </div> </li> <li class="card"> <div id="room-info"> <h1 id="room-name">cet @ cal</h1> <p class="room-description"> discussion around cal's center entreneurship , technology </p> </div> <div id="thumbnails-container"> <div id="thumb-0" class="thumb"> <div id="message-0" class="message-popup first"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-1" class="thumb"> <div id="message-1" class="message-popup top"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-2" class="thumb"> <div id="message-2" class="message-popup"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-3" class="thumb"> <div id="message-3" class="message-popup right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-4" class="thumb"> <div id="message-4" class="message-popup top right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-5" class="thumb"> <div id="message-5" class="message-popup top right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> </div> </li> <li class="card"> <div id="room-info"> <h1 id="room-name">yoga masters</h1> <p class="room-description"> masters of yoga may gathers here discuss art , practice techniques </p> </div> <div id="thumbnails-container"> <div id="thumb-0" class="thumb"> <div id="message-0" class="message-popup first"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-1" class="thumb"> <div id="message-1" class="message-popup top"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-2" class="thumb"> <div id="message-2" class="message-popup"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-3" class="thumb"> <div id="message-3" class="message-popup right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-4" class="thumb"> <div id="message-4" class="message-popup top right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> <div id="thumb-5" class="thumb"> <div id="message-5" class="message-popup top right"> <span class="dot">•</span> <span class="dot">•</span> <span class="dot">•</span> </div> </div> </div> </li> </ul> here's relevant css:
#cards { width: 100%; height: 260px; overflow: visible; margin: 0; } .card { padding: 30px 20px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; h1 { margin-top: 0; } } .thumb { width: 40px; height: 40px; display: inline-block; border-radius: 20px; border: 2px solid #9a9a9a; position: relative; background: #eee; cursor: pointer; margin-right: 10px; &:last-of-type { margin-right: 0; } background-size: 100% 100%; #message-0 { background: #e26a6a; &::before { border-bottom: 7px solid #e26a6a; } } #message-1 { background: #eb9532; &::before { border-top: 7px solid #eb9532; } } #message-2 { background: #66cc99; &::before { border-bottom: 7px solid #66cc99; } } #message-3 { background: #3498db; &::before { border-bottom: 7px solid #3498db; } } #message-4 { background: #67809f; &::before { border-top: 7px solid #67809f; } } #message-5 { background: #95a5a6; &::before { border-top: 7px solid #95a5a6; } } .message-popup { display: block; position: absolute; z-index: 9000; top: 37px; left: 7px; background: #ddd; border: 1px solid #ccc; color: white; transform: scale(0); -webkit-transform: scale(0); transform-origin: 10px -12px; padding: 5px 5px; width: 40px; text-align: center; border-radius: 3px; font-size: 13px; transition-property: all; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.34, 1.2, 0.7, 1); letter-spacing: -1px; &::before { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; background: transparent; position: absolute; top: -5px; left: 3px; } &.show { transform: scale(1); -webkit-transform: scale(1); } &.right { right: 7px; left: auto; transform-origin: 30px -12px; &::before { left: auto; right: 3px; } } &.top { top: -27px; transform-origin: 10px 39px; &.right { transform-origin: 30px 39px; } &::before { top: 25px; } } .dot { transition-property: transform, -webkit-transform; transition-duration: 0.45s; transition-timing-function: ease-in-out; } } } and here's javascript code drives it:
var animatedots = function(dots, i, numdots) { var currdot = $(dots[i]); currdot.css('transform', 'translatey(-4px)'); currdot.css('-webkit-transform', 'translatey(-4px)'); currdot.one("transitionend webkittransitionend otransitionend mstransitionend", function() { $(this).css('transform', 'translatey(0)'); $(this).css('-webkit-transform', 'translatey(0)'); }); }; var showpopup = function(popup) { // shows popup passed in , animates dots if (popup.hasclass('show')) { return; } // 'show' popup popup.addclass('show'); // start transition on dots var dots = popup.find('.dot'), = 0, numdots = dots.length; if (dots) { animatedots(dots, i, numdots); = (i + 1) % numdots; popup[0].dotinterval = setinterval(function() { animatedots(dots, i, numdots); = (i + 1) % numdots; }, 350); } }; $(function() { // return; var baraja = $('#cards').baraja(); $('#next').on('click', function(e) { e.preventdefault(); // stop current transitions if (popupinterval) { clearinterval(popupinterval); } baraja.next(); }); $('#close').on('click', function(e) { e.preventdefault(); baraja.close(); }); var popupinterval = setinterval(function() { var popups = $('#usa-germany .message-popup'), numpopups = popups.length, rand = math.floor(math.random() * numpopups), popup = $(popups[rand]); while (popup.hasclass('show')) { rand = math.floor(math.random() * numpopups); popup = $(popups[rand]); } showpopup(popup); settimeout(function() { // schedule popup hide popup.removeclass('show'); popup.one("transitionend webkittransitionend otransitionend mstransitionend", function() { var popup = $(this); clearinterval(popup[0].dotinterval); }); }, 3600); }, 2000); }); it difficult set on jsfiddle or similar .message-popup divs go scale(0) scale(1) , span.dot's inside each transition , down on time. card transitions fine if there aren't other transitions going on inside of it. not supposed have css transitions inside of other css transitions? how around this? or issue setinterval/settimeout?
the baraja library listens transitionend event on parent element gets bubbled children's transitionend events. stop this, in callback transitionend event, call stoppropagation() on event passed in so:
$el.on('transitionend', function(e) { e.stoppropagation(); // stuff }); relevant whenever want chain transitions on children transitions on children's parent element
Comments
Post a Comment