首页 \ 问答 \ CSS3关键帧动画在chrome中工作，而不是firefox(CSS3 Keyframe animation working in chrome, not firefox)

CSS3关键帧动画在chrome中工作，而不是firefox(CSS3 Keyframe animation working in chrome, not firefox)

 我有一个关键帧动画，我将其悬停在导航菜单上。 当我将鼠标悬停在上面时，动画效果很好，但如果我将鼠标移开，我希望它能完成动画。 这个功能在Chrome中正常运行，但不是Firefox，我无法弄清楚原因。 
 

 jsFiddle： http ： //jsfiddle.net/u95Lumm3/1/ 
 

 有一点我注意到，在FF上，即使你将鼠标放在上面，动画也会重置。 
 

 简单地删除'mozAnimationEnd'不会像在Stackoverflow上的另一个相似的问题那样解决问题。 
 

 HTML： 
 

<div style="width: 100px; height: 100px; background: green;">
    <div class="nav-bnt">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

 

 脚本： 
 

$('.nav-bnt').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $('.nav-bnt').removeClass("animation");
});

$('.nav-bnt').hover(function(){
  $('.nav-bnt').addClass("animation");        
})

 

 CSS： 
 

.nav-bnt div, .nav-bnt div:nth-of-type(3) {
    top: -15px; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    -moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(2) {
    top: 0;
    -moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(3) {
    top: 0;
    bottom: -16px;
}


.animation div:nth-of-type(2) {
    -webkit-animation: navanimateleft .5s;
    -moz-animation: navanimateleft .5s;
    -o-animation: navanimateleft .5s;
    -ms-animation: navanimateleft .5s;  
    animation: navanimateleft .5s;  
}

.animation div:nth-of-type(1), .animation div:nth-of-type(3) {

    -webkit-animation: navanimateright .5s;
    -moz-animation: navanimateright .5s;
    -ms-animation: navanimateright .5s;
    -o-animation: navanimateright .5s;
    animation: navanimateright .5s;

}

@-webkit-keyframes navanimateleft {
    0%      {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {-webkit-transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
    60%     {-webkit-transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
    100%    {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}

@keyframes navanimateleft {
    0%      {transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
    60%     {transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
    100%    {transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@-webkit-keyframes navanimateright {
    0%      {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {-webkit-transform: translate3d(10px, 0px, 0px) rotate(0deg);}
    60%     {-webkit-transform: translate3d(10px, 0px, 0px) rotate(180deg);}
    100%    {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@keyframes navanimateright {
    0%      {transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {transform: translate3d(10px, 0px, 0px) rotate(0deg);}
    60%     {transform: translate3d(10px, 0px, 0px) rotate(180deg);}
    100%    {transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


.nav-bnt {
    position: relative;
    width: 50px;
    height: 50px;
    top: 25px;
    cursor: pointer;
    background: rgba(255,255,255, 1);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 999;
    transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
} 

.nav-bnt:hover {
    -moz-transform: scale(1.10);
    -webkit-transform: scale(1.10);
    -o-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}


.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}


I have a key frame animation that I animate on hover for a navigation menu. When I hover over, the animation works just fine but I want it to finish the animation if I move the mouse off. This function is working correctly in Chrome, but not Firefox and I can't figure out why.
 

jsFiddle: http://jsfiddle.net/u95Lumm3/1/
 

One thing I have noticed, on FF the animation resets even if you keep the mouse on top.
 

Simply removing 'mozAnimationEnd' does not fix the issue like it does in a different, but similar, question on Stackoverflow.
 

HTML:
 

<div style="width: 100px; height: 100px; background: green;">
    <div class="nav-bnt">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

 

Script:
 

$('.nav-bnt').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $('.nav-bnt').removeClass("animation");
});

$('.nav-bnt').hover(function(){
  $('.nav-bnt').addClass("animation");        
})

 

CSS:
 

.nav-bnt div, .nav-bnt div:nth-of-type(3) {
    top: -15px; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    -moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(2) {
    top: 0;
    -moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(3) {
    top: 0;
    bottom: -16px;
}


.animation div:nth-of-type(2) {
    -webkit-animation: navanimateleft .5s;
    -moz-animation: navanimateleft .5s;
    -o-animation: navanimateleft .5s;
    -ms-animation: navanimateleft .5s;  
    animation: navanimateleft .5s;  
}

.animation div:nth-of-type(1), .animation div:nth-of-type(3) {

    -webkit-animation: navanimateright .5s;
    -moz-animation: navanimateright .5s;
    -ms-animation: navanimateright .5s;
    -o-animation: navanimateright .5s;
    animation: navanimateright .5s;

}

@-webkit-keyframes navanimateleft {
    0%      {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {-webkit-transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
    60%     {-webkit-transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
    100%    {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}

@keyframes navanimateleft {
    0%      {transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
    60%     {transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
    100%    {transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@-webkit-keyframes navanimateright {
    0%      {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {-webkit-transform: translate3d(10px, 0px, 0px) rotate(0deg);}
    60%     {-webkit-transform: translate3d(10px, 0px, 0px) rotate(180deg);}
    100%    {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@keyframes navanimateright {
    0%      {transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {transform: translate3d(10px, 0px, 0px) rotate(0deg);}
    60%     {transform: translate3d(10px, 0px, 0px) rotate(180deg);}
    100%    {transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


.nav-bnt {
    position: relative;
    width: 50px;
    height: 50px;
    top: 25px;
    cursor: pointer;
    background: rgba(255,255,255, 1);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 999;
    transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
} 

.nav-bnt:hover {
    -moz-transform: scale(1.10);
    -webkit-transform: scale(1.10);
    -o-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}


.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}


原文：https://stackoverflow.com/questions/29979180
更新时间：2022-02-14 10:02

最满意答案

 你有一个竞争事件处理程序的情况，最后一个（将高度设置为5.7em的那个）胜出。 事件处理程序实际上是堆叠的，因此您不断添加关闭菜单的其他副本。 
 

 尝试独立保持打开/关闭状态。 像这样（ jsfiddle ）： 
 

$(document).ready(function () {
    $('#nav').data('open', 0).mouseup(function () {
        if ($(this).data('open') == 0) {
            $(this).css('height', '33em').data('open', 1);
        } else {
            $(this).css('height', '5.7em').data('open', 0);
        }
    });
});

 

 或者更好的是，将CSS细节移至CSS类： 
 

#nav { height: 5.7em; }
.open { height: 33em !important; }

 

 ...只需开启和关闭该类（ jsfiddle ）： 
 

$(document).ready(function () {
    $('#nav').mouseup(function () {
        $(this).toggleClass('open');
    });
});


You have a case of competing event handlers, and the last one (the one that sets the height to 5.7em) wins. The event handlers actually stack, so you keep adding additional copies of the one that closes the menu.
 

Try maintaining the open/closed state independently. Something like this (jsfiddle):
 

$(document).ready(function () {
    $('#nav').data('open', 0).mouseup(function () {
        if ($(this).data('open') == 0) {
            $(this).css('height', '33em').data('open', 1);
        } else {
            $(this).css('height', '5.7em').data('open', 0);
        }
    });
});

 

Or better yet, move the CSS details to a CSS class:
 

#nav { height: 5.7em; }
.open { height: 33em !important; }

 

...and just toggle that class on and off (jsfiddle):
 

$(document).ready(function () {
    $('#nav').mouseup(function () {
        $(this).toggleClass('open');
    });
});

相关问答

更多

  • jquery-click-event的多个触发器[重复](Multiple triggers for a jquery-click-event [duplicate])[2022-12-20]

    您的代码无法正常工作的原因是您正在使用上下文选择器。 所以它的意思是：找到＃trigger2并在其中查找＃trigger1。 但你想要的是使用多选择器 。 $("#trigger1, #trigger2").click( ... ) 或者我只使用一个公共类，因此您不必跟踪ID $(".commonClass").click( ... ) The reason why your code is not working is you are using a context selector. So what ...

  • 使用MySQL触发器(Using MySQL triggers)[2023-07-09]

    扩展我的评论，我在我的MySQL服务器上创建了两个表，如下所示： CREATE TABLE items ( item_id int not null auto_increment primary key, item_amount double, description varchar(50) ); CREATE TABLE item_records ( record_id int not null auto_increment primary key, item_id int ...

  • jQuery使用事件和触发器访问“this”对象(jQuery access to 'this' object with events and triggers)[2022-07-11]

    你需要坚持this值，你可以通过多种方式来实现它，jQuery 1.4+为你提供$.proxy方法，例如： //... $(document).bind("customEvent", $.proxy(this.onCustomAction, this)); // or $(document).bind("customEvent", $.proxy(this, 'onCustomAction')); //... You need to persist the this value, you can do i ...

  • jQuery事件触发器只会触发一次...我需要它们始终工作(jQuery event triggers only fire once…I need them to always work)[2023-04-05]

    你有一个竞争事件处理程序的情况，最后一个（将高度设置为5.7em的那个）胜出。 事件处理程序实际上是堆叠的，因此您不断添加关闭菜单的其他副本。 尝试独立保持打开/关闭状态。 像这样（ jsfiddle ）： $(document).ready(function () { $('#nav').data('open', 0).mouseup(function () { if ($(this).data('open') == 0) { $(this).css('he ...

  • Firebird触发器不会从应用程序触发，但可以在数据库工具中使用(Firebird triggers do not fire from application but do work in DB tools)[2023-08-09]

    像大多数奇怪的问题一样，由于应用程序工作原理的思考过程，这个答案很容易被忽略。 更不用说学习/接受新项目和疯狂通勤的厌倦。 无论如何;-)。 事实证明触发器实际上是从应用程序工作，但是一个未刷新的数据感知控件在单击“保存”按钮时更改了值。 这是一个包含多个标签的表单。 表A（由触发器更新的表）显示在第一个选项卡中，其中包含数据感知控件的字段。 表B（在表A中有两个触发器，用于更新表中字段的表）显示在数据感知网格的第二个选项卡中。 当在网格中添加/删除行时，它在DB-中被删除，但因为表A从未在应用程序中刷新 ...

  • 在jQuery中简洁地添加自定义事件触发器(Succinctly Adding Custom Event Triggers in jQuery)[2023-12-10]

    对于你的第一个问题，没有看到一个例子就有点难以说。 我可能会弄错，但我很确定$ .trigger（）不会像你使用它一样工作。 它必须附加到jQuery对象，例如。 $().trigger() 。 对于你的第二个问题......你不必完全使用DOM元素，但你可以使用像$({}).on()这样的空jquery对象。 看到这个小提琴 。 希望这会有所帮助。 另外，您可能会将jQuery对象方法与核心方法混淆。 这里有一些信息以防万一。 For your first issue, it's a little har ...

  • 事件触发器不起作用(Event triggers don't work)[2022-04-13]

    我改变了你的代码： 将RoutedEvent更改为Grid.Loaded 添加了TargetName以及对Grid的引用 将TargetProperty更改为Grid.Opacity 查看以下代码： ...

  • JQuery - 事件委托系列中只有最后一个事件处理程序触发器？(JQuery - only last event handler triggers in event delegation series?)[2023-06-26]

    在每个$($slider).on('click',$dotNumber,function() {...}行中，将$ dotNumber替换为'#dot-number' 。 示例： $($slider).on('click','#dot-1',function() {...} 我不知道是否有一种特殊的方法来传递一个jQuery对象来指定一个子元素来定位，但我知道将CSS选择器添加为第二个参数就可以了。 根据手册页 ，第二个参数（如果它不是回调）是一个字符串。 In each of the $($slider) ...

  • 在Jquery上按Enter键时单击事件触发器(Click event triggers when press Enter key on Jquery)[2022-05-20]

    我的第一个建议是不使用全局点击处理程序。 而是将其绑定到搜索字段$('#searchField').click() 。 其次，您可能希望在搜索框中使用模糊和焦点事件来触发隐藏内容。 现场演示将有助于缩小您想要实现的目标。 My first suggestion would be to not use a global click handler. Instead bind it to the search field $('#searchField').click(). Second, you might ...

  • SELECT上的触发器(Fire triggers on SELECT)[2023-01-17]

    我知道只有两种方法可以做到这一点而且都没有触发。 您可以使用存储过程来运行查询，并将查询记录到表中以及您想要了解的其他信息。 您可以使用SQL Server的审核功能 。 我从来没有使用过后者，所以我不能说易用性。 There are only two ways I know that you can do this and neither are trigger. You can use a stored procedure to run the query and log the query to a ...

相关文章

更多
  • chrome如何强制刷新页面？
  • Chrome 控制台调试JavaScript
  • 哪有firefox的js资料可以查询？
  • 34款Firefox渗透测试插件
  • xheditor在Firefox提交内容为空
  • 用firebug给firefox添加信任链接
  • 比预想严重：FireFox现图像处理漏洞
  • 【转载】34款Firefox渗透测试插件
  • 【转】34款Firefox渗透测试插件
  • 18个扩展让你的Firefox成为渗透测试工具

    • 最新问答

    更多
  • 您如何使用git diff文件，并将其应用于同一存储库的副本的本地分支？(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收？(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get（）从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序：页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结？(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow：基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误：RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C＃类名中允许哪些字符？(What characters are allowed in C# class name?)
  • NumPy：将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全？(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet？(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href，而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用：悬停在悬停时：在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)

    • Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！