I'm trying to display and immediately animate a rotation of a SVG element using a CSS transition.
const node = getSVGElement(); // Has 'transform' set to 'rotate(0)'
node.classList.add('svg-animation');
const parent = document.getElementById('someDiv');
parent.appendChild(node);
setTimeout(() => {
node.setAttribute('transform', `rotate(${someOtherValue})`);
}
}, 50);
And in CSS:
.svg-animation {
transition: transform 0.5s ease-in-out;
}
This works as intended in Chrome, but Firefox and Safari display the element without animating it at all. Is there a different syntax (or method) that should be used so that it works in these browsers (I don't care about IE)?
Instead of setAttribute try a css transform; remember to specify units.
node.style.transitionDuration = '1s';
let rotation_angle_deg = 10
node.style.transform = 'rotate('+rotation_angle_deg+'deg)';
I've only tested this in Safari 15.5 but it works there and I can confirm that setAttribute ignores any transition-duration
Here you have two different ways to solve the problem. First using JavaScript and second using SMIL. From your code example it is not clear what the problem is, but make sure that the DOM is loaded before finding the element and then use the style property on the element instead of setting the attribute.
What solution to go for is up to you. I would say it depends on the context.
var someOtherValue = 90;
document.addEventListener('DOMContentLoaded', e => {
const node = document.querySelector('rect');
node.classList.add('svg-animation');
setTimeout(() => {
node.style.transform = `rotate(${someOtherValue}deg)`;
}, 500);
});.svg-animation {
transition: 1s ease-in-out;
}<svg viewBox="0 0 100 100" width="200">
<g transform="translate(50 50)">
<rect x="-20" y="-20" width="40" height="40" fill="navy"/>
</g>
</svg><svg viewBox="0 0 100 100" width="200">
<g transform="translate(50 50)">
<rect x="-20" y="-20" width="40" height="40" fill="navy">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0" to="90"
calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1"
begin="1s" dur="1s" fill="freeze"/>
</rect>
</g>
</svg>