Mat*_*aul 6 css safari animation svg smil
我正在使用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"
dur="250ms"
begin="indefinite"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 .1 .3 1"
fill="freeze"
id="open-menu"></animate>
<animate
xlink:href="#top-line"
attributeName="stroke-width"
from="8"
to="4"
dur="200ms"
begin="open-menu.begin + 50ms"
fill="freeze"</animate>
<animate
xlink:href="#top-line"
attributeName="d"
from="M 0,100 C 0,34.3 100,34.3 100,100"
to="M 0,70 C 50,70 50,70 100,70"
dur="250ms"
begin="indefinite"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 .1 .3 1"
fill="freeze"
id="close-menu"</animate>
<animate
xlink:href="#top-line"
attributeName="stroke-width"
from="4"
to="8"
dur="200ms"
begin="close-menu.begin + 50ms"
fill="freeze"</animate>
</path>
<path id="bot-line" fill="transparent" stroke="#ffffff" stroke-width="8" stroke-miterlimit="100" d="M 0,130 C 50,130 50,130 100,130">
<animate
xlink:href="#bot-line"
attributeName="d"
from="M 0,130 C 50,130 50,130 100,130"
to="M 0,100 C 0,165.7 100,165.7 100,100"
dur="250ms"
begin="open-menu.begin + 0ms"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 .1 .3 1"
fill="freeze"</animate>
<animate
xlink:href="#bot-line"
attributeName="stroke-width"
from="8"
to="4"
dur="200ms"
begin="open-menu.begin + 50ms"
fill="freeze"</animate>
<animate
xlink:href="#bot-line"
attributeName="d"
from="M 0,100 C 0,165.7 100,165.7 100,100"
to="M 0,130 C 50,130 50,130 100,130"
dur="250ms"
begin="close-menu.begin + 0ms"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 .1 .3 1"
fill="freeze"</animate>
<animate
xlink:href="#bot-line"
attributeName="stroke-width"
from="4"
to="8"
dur="200ms"
begin="close-menu.begin + 50ms"
fill="freeze"</animate>
</path>
<path id="middle-1" fill="transparent" stroke="#ffffff" stroke-width="8" stroke-miterlimit="100" d="M 0,100 C 50,100 50,100 100,100" transform="rotate(0 0 0)">
<animate
xlink:href="#middle-1"
attributeName="d"
from="M 0,100 C 50,100 50,100 100,100"
to="M 25,100 C 50,100 50,100 75,100"
dur="100ms"
begin="open-menu.begin + 0ms"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 0 1 1"
fill="freeze"</animate>
<animateTransform
xlink:href="#middle-1"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 100"
to="45 50 100"
dur="250ms"
begin="open-menu.begin + 100ms"
calcMode="spline"
keyTimes="0;1"
keySplines="0 .6 .3 1"
fill="freeze"</animateTransform>
<animateTransform
xlink:href="#middle-1"
attributeName="transform"
attributeType="XML"
type="rotate"
from="45 50 100"
to="0 50 100"
dur="150ms"
begin="close-menu.begin + 0ms"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 0 1 1"
fill="freeze"</animateTransform>
<animate
xlink:href="#middle-1"
attributeName="d"
from="M 25,100 C 50,100 50,100 75,100"
to="M 0,100 C 50,100 50,100 100,100"
dur="100ms"
begin="close-menu.begin + 150ms"
calcMode="spline"
keyTimes="0;1"
keySplines="0 .6 .3 1"
fill="freeze"</animate>
</path>
<path id="middle-2" fill="transparent" stroke="#ffffff" stroke-width="0" stroke-miterlimit="100" d="M 0,100 C 50,100 50,100 100,100" transform="rotate(0 0 0)">
<animate
xlink:href="#middle-2"
attributeName="d"
from="M 0,100 C 50,100 50,100 100,100"
to="M 25,100 C 50,100 50,100 75,100"
dur="100ms"
begin="open-menu.begin + 0ms"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 0 1 1"
fill="freeze"</animate>
<animate
xlink:href="#middle-2"
attributeName="stroke-width"
from="0"
to="8"
dur="1ms"
begin="open-menu.begin + 99ms"
fill="freeze"</animate>
<animateTransform
xlink:href="#middle-2"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 100"
to="-45 50 100"
dur="250ms"
begin="open-menu.begin + 100ms"
calcMode="spline"
keyTimes="0;1"
keySplines="0 .6 .3 1"
fill="freeze"</animateTransform>
<animateTransform
xlink:href="#middle-2"
attributeName="transform"
attributeType="XML"
type="rotate"
from="-45 50 100"
to="0 50 100"
dur="150ms"
begin="close-menu.begin + 0ms"
calcMode="spline"
keyTimes="0;1"
keySplines=".5 0 1 1"
fill="freeze"</animateTransform>
<animate
xlink:href="#middle-2"
attributeName="stroke-width"
from="8"
to="0"
dur="1ms"
begin="close-menu.begin + 150ms"
fill="freeze"</animate>
<animate
xlink:href="#middle-2"
attributeName="d"
from="M 25,100 C 50,100 50,100 75,100"
to="M 0,100 C 50,100 50,100 100,100"
dur="100ms"
begin="close-menu.begin + 150ms"
calcMode="spline"
keyTimes="0;1"
keySplines="0 .6 .3 1"
fill="freeze"</animate>
</path>
</svg>