使用 Jquery 添加/删除类事件在 Firefox 中仅触发一次 CSS3 动画

Question

我在这里遇到了许多帖子，详细说明了 CSS3 动画在 Firefox 中无法正常工作的问题，即使是动画只触发一次的问题：

Firefox only runs the CSS animation once

和

Documented bugs of Firefox/jQuery/CSS animations together?

但这些修复与我的问题无关。我已经让这些动画在 Safari/Chrome 中运行，甚至为所有 css 提供了正确的供应商前缀（即使 firefox 不需要它们）。我正在使用 Jquery 添加/删除类事件来触发动画，我可以在萤火虫中看到类在我期望的时候发生变化。

唯一的问题是动画第一次触发，但不再触发，只是默认让面板消失并重新出现

CSS：

/* CUSTOM SLIDING PANEL */
@-webkit-keyframes panelSlideLeft {
    from {
        opacity: $panelOpacityStart;
        -webkit-transform: translateX(0);
    }
    to {
        opacity: $panelOpacityEnd;
        -webkit-transform: translateX($panelWidth);
    }
}
@-moz-keyframes panelSlideLeft {
    from {
        opacity: $panelOpacityStart;
        -moz-transform: translateX(0);
    }
    to {
        opacity: $panelOpacityEnd;
        -moz-transform: translateX($panelWidth);
    }
}
@keyframes panelSlideLeft {
    from {
        opacity: $panelOpacityStart;
        transform: translateX(0);
    }
    to {
        opacity: $panelOpacityEnd;
        transform: translateX($panelWidth);
    }
}

.slide-panel-left-open {
    opacity: $panelOpacityEnd;
    -webkit-animation: panelSlideLeft $animationDuration linear;
    -moz-animation: panelSlideLeft $animationDuration linear;   
    animation: panelSlideLeft $animationDuration linear;            
    -webkit-transform: translateX($panelWidth);
    -moz-transform: translateX($panelWidth);
    transform: translateX($panelWidth);
}
.slide-panel-left-close {
    -webkit-animation: panelSlideLeft $animationDuration linear reverse;
    -moz-animation: panelSlideLeft $animationDuration linear reverse;   
    animation: panelSlideLeft $animationDuration linear reverse;            
} 

在 javascript 中，我使用一个布尔值来确定要修改哪些类，并且在 Jquery 对象上设置了 slidePanel.side 并按预期更改为“左”或“右”，即使在 Firefox 中也是如此（有右侧滑动面板也使用此功能）。

JS：

slidePanel.bind('togglePanel', function() {
    if(slidePanel.open) {
        slidePanel.removeClass('slide-panel-' + slidePanel.side + '-open');
        slidePanel.addClass('slide-panel-' + slidePanel.side + '-close');
    } else {
        slidePanel.removeClass('slide-panel-' + slidePanel.side + '-close');
        slidePanel.addClass('slide-panel-' + slidePanel.side + '-open');
    }
    slidePanel.open = slidePanel.open ? false : true;   
});

Answer 1

不管这是否是一个实际的错误，我认为一个功能示例就是所要求的。

我创建了一个小提琴，它实现了在单击对象时使用类进行切换的动画。

CSS 动画 jsFiddle：

http://jsfiddle.net/aA5k7/9/

请原谅这个例子的粗鲁。最初的问题不包括 HTML 并且 CSS 引用了一些变量，例如#panelWidth，所以我获得了一些创意许可并尝试创建一个保持原始精神的工作示例。

在 CSS（它支持 Webkit 和 Mozilla，但为了简洁不包括非前缀选项）中，我使用普通格式单独指定动画参数。

animation-fill-mode 属性对于理解尤为重要。你可以在这里阅读更多： http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

HTML：

<div id="slidePanel">Slide Panel</div>

CSS：

/* CUSTOM SLIDING PANEL */
@-moz-keyframes panelSlideLeft {
    from {
        opacity: 1.0;
        -moz-transform: translateX(200px);
    }
    to {
        opacity: 1.0;
        -moz-transform: translateX(0px);
    }
}
@-moz-keyframes panelSlideRight {
    from {
        opacity: 1.0;
        -moz-transform: translateX(0px);
    }
    to {
        opacity: 1.0;
        -moz-transform: translateX(200px);
    }
}

@-webkit-keyframes panelSlideLeft {
    from {
        opacity: 1.0;
        -webkit-transform: translateX(200px);
    }
    to {
        opacity: 1.0;
        -webkit-transform: translateX(0px);
    }
}
@-webkit-keyframes panelSlideRight {
    from {
        opacity: 1.0;
        -webkit-transform: translateX(0px);
    }
    to {
        opacity: 1.0;
        -webkit-transform: translateX(200px);
    }
}
.slide-panel-right {
    -moz-animation-name: panelSlideRight;
    -moz-animation-duration: 0.35s;
    -moz-transition-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: both;
    -webkit-animation-name: panelSlideRight;
    -webkit-animation-duration: 0.35s;
    -webkit-transition-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;    
}
.slide-panel-left {
    -moz-animation-name: panelSlideLeft;
    -moz-animation-duration: 0.35s;
    -moz-transition-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: none;
    -webkit-animation-name: panelSlideLeft;
    -webkit-animation-duration: 0.35s;
    -webkit-transition-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: none;    
} 
#slidePanel {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    border: 1px solid green;
    padding: 8px;
}

JS：

var open = false;

$("#slidePanel").on('click', function() {
  if(open) {
    $(this).removeClass('slide-panel-right');
    $(this).addClass('slide-panel-left');
  } else {
    $(this).removeClass('slide-panel-left');
    $(this).addClass('slide-panel-right');
  }
  open  = open ? false : true;   
});

---

使用 CSS 过渡可以实现类似的结果（使用更少的代码）。这是另一个要演示的 jsFiddle：

CSS 过渡 jsFiddle

http://jsfiddle.net/aA5k7/11/