I'm using a CSS class to animate an element, it has a CSS variable in it, like so:
.psc-pump-animation {
--animation-duration: 0.5s;
}
I'm using the class in the style for the element I want to animate and it works great. I can see that additional properties added to the "style" section will generally be added as inline values in a tag's html style attribute when the project is running a browser i.e. the backgroundSize: 50px here:
shows up in the html:
<g id="C-0-0-centre" name="centre" transform="matrix(1 0 0 1.0021 0 -.0032257)" class="psc-pump-animation" style="fill: rgb(0, 0, 0); stroke-width: 0.26484px; background-size: 50px;">
...
CSS variables can be overwritten using the inline html tag style attribute. However if I try to add a custom property to style called --animation-duration, I get an error saying that it's an "Invalid key name". I've seen posts suggesting using css injection and adding something like backgroundImage: ; --animation-duration: 3s; but they don't seem to end up in the resultant html. Does anybody have any suggestions that I can do to expose '-animation-duration'? (Ideally so I can set up a binding to its value.)
When you do
the --animation-duration is not a CSS regular property, like background-color or font-family - I believe the double dash designates that as a variable or custom property. So what I think you're actually doing is setting the --animation-duration property to 0.5s for the .psc-pump-animation class specifically.
That is why you won't be able to do this same thing from the Designer - if you use inline styles, it puts that into the markup of the component directly, not into a CSS class for you (?). That's just an educated guess, though.
Depending on what your need is, I would just define the different --animation-duration choices up front in a Perspective Style (if its 3 - 10 options) and then bind on the class name. Or, you could do something like
:root {
--animate-slow: 0.5s;
--animate-medium: 1.0s;
--animate-fast: 1.5s;
--animate-super-fast: 2.0s;
}
in the Perspective Advanced Stylesheet (or a theme file) and then in the designer you can add the animation-duration property and use something like var(--animate-slow) or a binding to define which property you use.
1 Like
I found a way to do it, but it feels like it's a bit of a hack. I added a script to the onStartup action of the component that digs down to the element whose style I want to add this --animation-duration to and adds it to the dictionary. Upon applying the script, the prop is clearly visible in the property editor:
As you can see, the orange background indicates that the designer isn't a big fan of this (and hovering over it still displays an 'invalid key'). Although curiously, the orange background did disappear at one point (and the 'invalid key' warning) so sometimes the property editor seems ok with it?
Furthermore, this does actually translate to the --animation-duration property being included in the resultant html and I can also configure a binding to it like I originally wanted to. Seems like it could work but I feel like something isn't quite configured in a way that's comfortable for the designer property editor currently, anybody at IA got any insight?