我正在使用SMIL进行动画,并使用javascript添加/删除类并触发切换.
在Chrome中一切正常,但它在Safari中崩溃了.动画在第一个切换开始时在Safari中工作,但随后中断,仅触发动画的某些部分.
链接到Codepen:http://codepen.io/matthewcpaul/pen/EaqmpE
任何帮助将不胜感激!
var burgerMenu = document.querySelector(".ibmburger");
burgerMenu.onclick = function() {
if (burgerMenu.classList.contains("close")) {
document.getElementById("close-menu").beginElement();
burgerMenu.classList.remove("close");
}
else {
document.getElementById("open-menu").beginElement();
burgerMenu.classList.add("close");
}
}.ibmburger {
position: absolute;
top: 50%;
left: 50%;
margin: -32px 0 0 -32px;
background: #734098;
cursor: pointer;
}<svg class="ibmburger" id="svg-all" width="64" height="64" viewbox="-50 0 200 200">
<path id="top-line" fill="transparent" stroke="#ffffff" stroke-width="8" stroke-miterlimit="100" d="M 0,70 C 50,70 50,70 100,70">
<animate
xlink:href="#top-line"
attributeName="d"
from="M 0,70 C 50,70 50,70 100,70"
to="M 0,100 C 0,34.3 100,34.3 100,100" …