CSS过渡早期切断
[英]CSS transition cutting off early
问题描述
I'm having an issue with my CSS transitions being cut off early and I'm not sure why it's happening. 
我有一个问题，我的CSS过渡被提前切断，我不知道为什么会发生这种情况。 I think it has something to do with another transition on a child element because if I remove the code that makes the child elements transition, the container's transition is fine. 我认为它与子元素上的另一个转换有关，因为如果我删除使子元素转换的代码，容器的转换就可以了。
The code is kind of long and I'm using a library called Baraja that's supposed to allow me to transition between elements as if they were cards. 代码有点长，我正在使用一个名为Baraja的库，它应该允许我在元素之间进行转换，就好像它们是卡片一样。
This is the structure of the relevant HTML: 这是相关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>
Here's the relevant CSS: 这是相关的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 the JavaScript code that drives it: 以下是驱动它的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);
});
It was difficult to get everything set up on a JSFiddle or similar but basically the .message-popup divs go from scale(0) to scale(1) and then the span.dot 's inside each transition up and then back down over time. 很难在JSFiddle或类似设置上设置所有内容，但基本上.message-popup div从scale(0)到scale(1) ，然后是每个转换中的span.dot ，然后随着时间的推移返回。 The card transitions are fine if there aren't any other transitions going on inside of it. 如果内部没有任何其他过渡，则卡过渡很好。 Are you not supposed to have CSS transitions inside of other CSS transitions? 你不应该在其他CSS过渡中有CSS过渡吗？ How do I get around this? 我该如何解决这个问题？ Or is it an issue with setInterval/setTimeout? 或者是setInterval / setTimeout的问题？
1 个解决方案
解决方案1
1 已采纳 2014-06-26 04:59:46
The Baraja library listens for the transitionend event on the parent element which gets bubbled up from the children's transitionend events. Baraja库侦听父元素上的transitionend事件，该元素从子元素的transitionend事件中冒出来。 To stop this, in the callback to the transitionend event, call stopPropagation() on the event passed in like so: 要停止这一点，在回调至transitionend事件，调用stopPropagation()传递在像这样的事件：
$el.on('transitionend', function(e) {
e.stopPropagation();
// do stuff
});
Relevant for whenever you want to chain transitions on children transitions as well as for those on the children's parent element 与您想要在子转换以及子元素的父元素上链接转换的时间相关
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当鼠标离开元素时，CSS 过渡过早结束 - CSS transition ends too early when mouse leaves element
CSS：调整背景图片的大小，而不是剪裁 - CSS: Resize background image rather than cutting off
CSS float：left和溢出：可见的截断文本 - CSS float:left and overflow:visible cutting off text
Highcharts 传奇正在被切断 - Highcharts legend is cutting off
谷歌地图切断 - Google Map cutting off
Facebook 评论截断 - Facebook Comments Cutting Off
HTML、CSS 和 Js，用于将 img 大小限制为一个框，切断任何外部内容 - HTML, CSS and Js for limiting img size to a box, cutting off anything outside
X轴标题切断 - X axis title cutting off
Firefox切断了表格的底部 - Firefox cutting off bottom of table
垂直轮播切割图像 - vertical carousel cutting off images
相关标签