- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
当我点击一个按钮时,会出现一个 slider 。 ( here is an example of what it looks like , 不要关注这段代码)
slider 通过动画显示。动画完成后,我应该包含一个从服务器加载的 HTML 页面。我需要在动画之后在 slider 中应用 HTML,否则动画将停止(重新计算 DOM)。
等待数据准备好和转换完成
为什么?如果我在动画期间应用 HTML,它会在新 HTML 添加到 DOM 时停止动画。所以我在第 4 步之前等待两者都结束。
这里是缩短的代码:
// Start loading data & animate transition
var count = 0;
var data = null;
++count;
$.get(url, function (res) {
data = res;
cbSlider();
});
// Animation starts here
++count;
$(document).on('transitionend', '#' + sliderId, function () {
$(document).off('transitionend', '#' + sliderId);
cbSlider()
});
function cbSlider() {
--count;
// This condition is only correct when both GET request and animation are finished
if (count == 0) {
// Attempt to enforce the frame to finish (doesn't work)
window.requestAnimationFrame(() => { return });
$('#' + sliderId + ' .slider-content').html(data);
}
}
transitionend
过早调用。它使最后一个动画帧太长(477.2 毫秒)并且在 transitionend
事件中最后一帧未呈现。
从 Google 文档中,我可以告诉您 Pixel Pipeline 的 Paint 和 Composite 步骤在Event(transitionend)
之后调用:
也许我想多了。
我应该如何处理这种动画?
如何等待动画完全完成并渲染?
最佳答案
我不确定为什么 transitionend
在最后一帧渲染之前被触发,但在这个(非常粗糙的)测试中似乎 setTimeout
确实 帮助...
第一个示例显示了 html 计算和注入(inject)是如何过早发生的。第二个示例将长时间运行的方法包装在 setTimeout
中,并且似乎没有触发动画中的任何中断。
var ended = 0;
var cb = function() {
ended += 1;
if (ended == 2) {
$(".animated").html(createLongHTMLString());
}
}
$(".load").click(function() {
$(".animated").addClass("loading");
$(".animated").on("transitionend", cb);
setTimeout(cb, 100);
});
function createLongHTMLString() {
var str = "";
for (var i = 0; i < 100000; i += 1) {
str += "<em>Test </em>";
}
return str;
};
.animated,
.target {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
line-height: 100px;
overflow: hidden;
}
.target,
.animated.loading {
transform: translateX(300%);
}
.animated {
background: green;
z-index: 1;
transition: transform .2s linear;
}
.target {
background: red;
z-index: 0;
}
.wrapper {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="animated">Loading</div>
<div class="target"></div>
</div>
<button class="load">load</button>
setTimeout
似乎可以修复它用 setTimeout
围绕 html 注入(inject)代码。
var ended = 0;
var cb = function() {
ended += 1;
if (ended == 2) {
setTimeout(function() {
$(".animated").html(createLongHTMLString());
});
}
}
$(".load").click(function() {
$(".animated").addClass("loading");
$(".animated").on("transitionend", cb);
setTimeout(cb, 100);
});
function createLongHTMLString() {
var str = "";
for (var i = 0; i < 100000; i += 1) {
str += "<em>Test </em>";
}
return str;
};
.animated,
.target {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
line-height: 100px;
overflow: hidden;
}
.target,
.animated.loading {
transform: translateX(300%);
}
.animated {
background: green;
z-index: 1;
transition: transform .2s linear;
}
.target {
background: red;
z-index: 0;
}
.wrapper {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="animated">Loading</div>
<div class="target"></div>
</div>
<button class="load">load</button>
关于javascript - 事件 'transitionend' 被调用得太早,它延迟渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39167044/
我正在尝试使用 jQuery 和 css 转换对一些动画进行排序。看起来容器宽度应该在小部件完成从“顶部”css 更改的转换之前进行动画处理,但它们是一起触发的。 为什么 widget
我想在项目上的波纹动画执行后执行一个函数。我目前正在使用以下代码: Proceed 这是一张带有图像和文本的卡片。当
我向 div 添加了一个 transitionend 事件监听器。此 div 具有在某些元素上具有过渡效果的子元素。我希望 transitionend 事件只针对我添加它的元素触发,这是一个错误吗?或
我有多个元素,每个元素都以(某种程度上)持续时间进行动画处理。我使用 CSS3 转换动画,使用 jQuery 库和来自 David Walsh 的 transitionend 辅助函数. 我的问题是
我有一些 javascript 会触发一些样式更改,从而导致 CSS 转换。 我应该如何挂接一个将在转换完成后执行的回调。显然,在旧版浏览器中,它会立即转换,但这些浏览器也无法识别 transitio
我有以下代码,我的问题是 transitionend 事件被触发了两次。我不知道是什么原因造成的。我怀疑 vendor 前缀导致了它,但事实并非如此。即使我只留下 transitionend 和 tr
我想了解为什么以下代码会以指数方式复制 transitionend 的返回值。 这对我来说没有任何意义,因为它们应该具有相同的行为并且应该只执行一次。 下面评论了预期的行为。 (function()
我需要一个特殊的类似 transitionend 的事件,该事件在所有转换完成后触发一次,或者如果 CSS 中没有定义转换则立即触发。 这是我到目前为止所想到的: (function($){ $.
在下面的示例中,我正在使用 CSS 进行 background-color 转换,并尝试处理两个 div 的 transitionend 事件。 不幸的是,transitionend 不会为 div2
我有一个 HTML 元素,我附加了一个 webkitTransitionEnd 事件。 function transEnd(event) { alert( "Finished transiti
我似乎无法让这个过渡的开始部分起作用,只有结束部分。 我之所以按照我的方式构建我的 html,是因为我需要使用 display: none 和 display:block 来实际删除元素文档流。使用
我为 CSS 关键帧动画创建了一个非常基本的测试,包括“ontransitionend”的事件监听器 - 但无论我使用什么变体,这个“过渡结束”监听器都不会触发。 (我的完整代码包含所有 vendor
我正在尝试编写一些具有 webkitTransitionEnd eventListener 回调函数的东西,但由于某种原因 eventListener 被触发了两次(doSomething 被执行了两
我有一个小应用程序,它使用 CSS3 添加和删除 .is-active 动画部分,我需要从中删除 .is-active元素 .resulting-page 然后在 transitionend 上将 .
closeContent() function 有一些问题,我不知道如何在每次单击 .show-content< 时阻止它运行. transitionend 基本上不应该踢两次。 任何帮助将不胜感激。
我想创建一个自定义事件来处理 transitionend 事件的所有不同 vendor 前缀版本(即 webkitTransitionEnd、mozTransitionEnd 、msTransitio
我有两个 div 元素,即 .parentDiv 和 .childDiv 我正在使用 css transition 来为两者设置动画。 .childDiv 应首先为其不透明度设置动画,然后在 tran
检查一下: http://jsfiddle.net/jqs4yy0p/ JS $('div').addClass('switch').on('transitionend', function(e){
我试图让 mouseover 事件监听器仅在 css 转换结束时触发。我尝试在 css 转换结束时提醒一条随机消息,它确实按预期工作(仅在结束时显示消息)。但出于某种原因,mouseover 事件甚至
我有一个切换器,我正在使用 jQuery 调用其 checked 状态。每次我单击从未选中切换到选中时,控制台都会记录 “do this!” 两次。为什么此函数会触发两次?让它触发一次的解决方法是什么
我是一名优秀的程序员,十分优秀!