Webkit的转换结束事件称为webkitTransitionEnd,Firefox是transitionEnd,opera是oTransitionEnd.在纯JS中处理所有这些问题的好方法是什么？我应该做浏览器嗅探吗？或分别实施每一个？还有其他一些方法没有发生在我身上？
即:
//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";
element.addEventListener(transitionend, function(){
//do whatever
},false);
要么
// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);
function fn() {
//do whatever
}
我有id ='mainmenu'的div.我在按钮点击后通过JavaScript添加CSS3过渡(通过向#mainmenu添加'transition'并创建将添加到div元素的类.fadein和.fadeout).码:
<div id='mainmenu'></div>
<button id="btn1">Click me1</button>
<button id="btn2">Click me2</button>
#mainmenu {
width:100px;
height:100px;
background:#eee;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
.fadeout {
opacity:0;
}
.fadein {
opacity:1;
}
var menu = document.getElementById('mainmenu'),
btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
}
问题是现在我想添加display none和block to fadeout和fadein选项.所以在fadeout动画div之后应该显示none,并且在fadein显示块之后:
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
menu.style.display = 'none';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
menu.style.display = 'block'; …让我们假设一个div从动画opacity:0;到opacity:1;,我想保留opacity:1;动画结束之后.
这是什么animation-fill-mode:forwards;.
@keyframes myAnimation {
from { opacity:0; }
to { opacity:1; }
}
div {
opacity:0;
animation-name:myAnimation;
animation-delay:1s;
animation-duration:2s;
animation-fill-mode:forwards;
}?
<div>just a test</div>?
在这个答案中,我读到animation-fill-modeChrome 16+,Safari 4 +,Firefox 5+支持.
但Chrome 1+和Opera也支持animation单独使用.因此,即使不支持,使用Modernizr进行的一般测试也可能会返回正值.fill-mode
目标animation-fill-mode我在Modernizr上添加了一个新的测试:
Modernizr.addTest('animation-fill-mode',function(){
return Modernizr.testAllProps('animationFillMode');
});
现在我有一个.no-animation-fill-modeCSS和Modernizr.animationFillModeJavaScript 的课程.
我还从CSS3动画规格中读到:
文档样式表中指定的动画将从文档加载开始
是否可以在动画结束的确切秒数内运行简单的jQuery函数
$(document).ready(function(){ …当我点击一个按钮时,会出现一个滑块.(这里是它的样子的一个例子,不要注意这段代码)
滑块通过动画显示.动画结束后,我应该包含一个我从服务器加载的HTML页面.我需要在动画之后在滑块中应用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 …我想知道是否有一些预定义的事件,如webkitTransitionEnd在Mozilla和Opera浏览器中的Chrome？
我怎样才能检测到浏览器是否启用了webkit和CSS3？
我习惯用JavaScript动画元素.我发现用CSS3做起来更简单.
使用JavaScript如何检测CSS动画何时开始以及何时结束？有什么办法吗？
是否有一个纯粹的javascript事件(没有jQuery),当我将div的css样式从块更改为无时触发.我的印象是我可以通过"onBlur"捕获它,但看起来我不能!
请指教!
有没有办法在我的Javascript中检测一个元素当前是否正在使用CSS3过渡动画？
一个"transitionstart"-event(相当于'transistionend'事件)也可以解决,但我在规范中找不到任何提及它.
我正在为客户创建一个工作页面，带有一个滑出搜索栏。当我单击打开搜索输入字段的按钮（它从隐藏开始）时，我希望焦点（光标）移动到搜索栏（输入）。
出于某种奇怪的原因，我似乎能够获得焦点来切换输入字段的唯一方法是，如果我将其放入最短时间约为 50 毫秒的 setTimeout 中（我尝试了 0，但不起作用）。
奇怪的警告 - 当我关闭搜索栏（单击隐藏搜索的打开/关闭按钮）时，我可以暂时使输入字段获得焦点/光标，但当它打开时不会，这就是我想要的。除非它在 setTimeout ....
将焦点设置为其他内容，然后对其进行模糊处理，然后将焦点设置为我的输入字段。[X]
用 0 ms [x]包裹.focus()asetTimeout
将焦点设置为我创建的不同的“测试”输入字段。[作品]
tabindex到 -1 [x] 的输入const icon = document.getElementById("search-icon");
const form = document.getElementById("search-form");
const input = document.getElementById("search-input");
icon.parentElement.addEventListener("click", e => {
form.classList.toggle("visible");
icon.classList.toggle("fa-search");
icon.classList.toggle("fa-times");
setTimeout(() => input.focus(), 50);
});<div class="header__search">
<i id="search-icon" class="fas fa-search">click me</i>
<form
id="search-form"
class="header__search-area"
onclick="event.stopPropagation()"
>
<input
id="search-input"
tabindex="-1"
type="text"
placeholder="Enter Search Term..."
/>
<button type="submit">search</button>
</form>
</div>为了更快地理解，您单击图标 …
我正在学习javascript和css3游戏,我正在研究外星人游戏.游戏是一个猜谜游戏,你输入X和Y位置的猜测,导弹使用css3过渡向外星人移动.当导弹到达外星人时,爆炸应该出现; 但我很难确定转换何时结束.目前,当您进行X和Y猜测并且导弹起飞时,爆炸就会出现.当css3转换结束时,如何使用Javascript检测爆炸？
这是我目前拥有的:
样式表:
#explosion
{
width: 20px;
height: 20px;
position: absolute;
display: none;
background-image: url(../images/explosion.jpg);
}
#alien
{
width: 20px;
height: 20px;
position: absolute;
top: 20px;
left: 80px;
background-image: url(../images/alien.jpg);
}
#missile
{
width: 10px;
height: 10px;
position: absolute;
top: 240px;
left: 145px;
background-image: url(../images/missile.jpg);
/*Transition*/
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
和Javascript:
if(guessX >= alienX && guessX <= alienX + 20)
{
//Yes, it's within the X range, …动画完成后使用jQuery可以计算元素的大小吗？我的简化示例是:
<style>
.brick
{
transition: all 0.4s ease-in-out;
}
.large
{
width: 400px;
height: 400px;
}
.small
{
width: 200px;
height: 200px;
}
</style>
<script>
$('.brick').removeClass('small').addClass('large');
$('.brick').height(); // returns 200px but desired 400px
$('.brick').width(); // returns 200px but desired 400px
</script>
我不能等到动画完成后才能获得大小,我不能硬编码JS中的任何大小.有任何想法吗？
编辑:小尺寸和大尺寸的错字
该_.throttle(function() {}, 250)功能是否仅触发click？因为我试图以一个小延迟运行一些代码,并且由于某种原因它似乎不起作用.
return _.throttle(function() {
return ( $(this).hasClass('dataRevealed') ) ? $(this).addClass('animated fadeOut') : true;
}, 350);
编辑:该函数看起来像这样:
Application.CardView.prototype.removeSimilarCards = function(_container) {
return $(_container).find('[data-identifier="card-view"]').each(function() {
console.log("first");
_.throttle(function() {
console.log("inner");
return ( $(this).hasClass('dataRevealed') ) ? $(this).addClass('animated fadeOut') : true;
}, 350);
});
};