[英]CSS transition cutting off early
我有一個問題,我的CSS過渡被提前切斷,我不知道為什么會發生這種情況。 我認為它與子元素上的另一個轉換有關,因為如果我刪除使子元素轉換的代碼,容器的轉換就可以了。
代碼有點長,我正在使用一個名為Baraja的庫,它應該允許我在元素之間進行轉換,就好像它們是卡片一樣。
這是相關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 with 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 for Entreneurship and 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 to discuss their art and 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>
這是相關的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;
}
}
}
以下是驅動它的JavaScript代碼:
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 the popup passed in and animates its dots
if (popup.hasClass('show')) {
return;
}
// 'show' popup
popup.addClass('show');
// start transition on dots
var dots = popup.find('.dot'),
i = 0,
numDots = dots.length;
if (dots) {
animateDots(dots, i, numDots);
i = (i + 1) % numDots;
popup[0].dotInterval = setInterval(function() {
animateDots(dots, i, numDots);
i = (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 the popup to hide
popup.removeClass('show');
popup.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
var popup = $(this);
clearInterval(popup[0].dotInterval);
});
}, 3600);
}, 2000);
});
很難在JSFiddle或類似設置上設置所有內容,但基本上.message-popup div從scale(0)
到scale(1)
,然后是每個轉換中的span.dot
,然后隨着時間的推移返回。 如果內部沒有任何其他過渡,則卡過渡很好。 你不應該在其他CSS過渡中有CSS過渡嗎? 我該如何解決這個問題? 或者是setInterval / setTimeout的問題?
Baraja庫偵聽父元素上的transitionend
事件,該元素從子元素的transitionend
事件中冒出來。 要停止這一點,在回調至transitionend
事件,調用stopPropagation()
傳遞在像這樣的事件:
$el.on('transitionend', function(e) {
e.stopPropagation();
// do stuff
});
與您想要在子轉換以及子元素的父元素上鏈接轉換的時間相關
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.