jquery - 使用 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 添加/删除类事件来触发动画，并且我可以在 Firebug 中看到类在我期望的时候发生了变化。

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

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 中，我使用 bool 值来确定要修改的类，并且 slidePanel.side 设置在 Jquery 对象上并且按预期更改为“左”或“右”，即使在 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

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

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

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/