Hi everyone,
I’m trying to make a specific row in my Vaadin Grid “blink” using CSS Keyframes. I can successfully set a distinct background color for that row, so the row selector and styling do workd. However, the actual keyframe animation never kicks in.
Java (Flow)
grid.setPartNameGenerator(dataItem -> {
boolean shouldBlink = /* condition here */;
return shouldBlink ? "alert-row" : "regular-row";
});
This sets the part name of “alert-row” if a certain condition is met for the data item.
TypeScript (LitElement)
import { LitElement, html, css } from 'lit-element';
import { customElement } from 'lit/decorators.js';
import { sharedStyles } from 'Frontend/themes/my-theme/shared-styles';
@customElement('custom-grid-view')
export class CustomGridView extends LitElement {
static get styles() {
return [
sharedStyles,
css`
:host {
display: block;
height: 100%;
width: 100%;
}
@keyframes blinkEffect {
0% {
--vaadin-grid-cell-background: red;
}
50% {
--vaadin-grid-cell-background: yellow;
}
100% {
--vaadin-grid-cell-background: red;
}
}
vaadin-grid::part(alert-row) {
/* A static color works fine here: */
background-color: lightgoldenrodyellow;
/* Attempting to enable animation (commented out below) does nothing: */
/*
animation: blinkEffect 2s infinite;
*/
}
`,
];
}
render() {
return html`
<vaadin-grid style="height: 100%" id="myGridElement">
<!-- Grid columns and data binding go here -->
</vaadin-grid>
`;
}
}
Using the exact same @keyframes on a simple
element outside of the Grid does work (it blink as intended), so the keyframe definition is valid.
Confirming that the static color (lightgoldenrodyellow) is applied correctly, so the CSS selector itself is not an issue.
Does anyone have suggestions on how to make keyframe animations work on a single Vaadin Grid row in Vaadin 24+ ?
The row “alert-row” part selector does get recognized for static styling, but the animation won’t run in the Grid.
Thanks in advance for any insights.