2

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

Firefox 只运行一次 CSS 动画

和

一起记录 Firefox/jQuery/CSS 动画的错误？

但这些修复与我的问题无关。我已经让这些动画在 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 中，我使用布尔值来确定要修改哪些类，并且在 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;   
});
4

1 回答 1

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/

于 2014-01-31T16:32:11.620 回答