Open cameralibre opened 3 years ago
One way of avoiding needlessly repetitive CSS, whether this change is made or not, would be to check if any @keyframes
blocks are identical, merge them into one, and update the animation-name
references.
#circle-a, #circle-b, #circle-c, #circle-d, #circle-e, #circle-f, #circle-g,
#circle-h, #circle-i, #circle-j { animation-name: opacity-anim-a; }
@keyframes opacity-anim-a {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Issues to consider in this case:
targets
object into a string for manipulating into CSS syntax? (probably, yes)a-anim
, or concatenate something potentially very long like circle-a-circle-b-circle-c-circle-d-circle-e-circle-f-circle-g-circle-h-circle-i-circle-j-anim
, or maybe a name created from the animated properties, eg. opacity-transform-scale-anim-a
?
Currently the script only creates animations for
id
selectors, and it requires that every animated element in the document has anid
. Non-id
selectors can still be used in the anime.js timeline, eg:This would successfully select all
circle
elements that are direct children ofg
elements:My current approach could result in needlessly repetitive CSS, eg. if there were many
g > circle
elements:Compared to:
My current approach also requires that you go through your document and add
id
s to every element referenced in the anime.js timeline before running the script, which is a bit of a faff.