Keyframe animation not working on a specific Grid Row (Vaadin 24.5.2)

General
1

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.

4fed192963d00e26878933cbd1e1b63b
4fed192963d00e26878933cbd1e1b63b703×407 8.41 KB

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.

2

I believe you’ve hit the browser limitation/bug, that keyframe animations need to be defined within the shadow DOM in order to work on shadow parts.

The workaround is to rely on the legacy shadow DOM style injection, by creating a frontend/themes/my-theme/components/vaadin-grid.css and placing the CSS keyframe definition there.

1 Like
3

Hi !

Thanks again for your help! in the end, i just moved my keyframe into a separate .css file and everything started working perfectly.

4

What is the solution in Vaadin 25, where injecting CSS into Vaadin components’ shadow DOM is disabled?

5

You can enable it and hope browser limitation are gone until it is fully removed.

6

Animations that continue infinitely can be applied on the vaadin-grid element, and the animation can change custom property values that are then applied to specific shadow parts.

vaadin-grid::part(alert-row) {
  /* This custom property works only in Vaadin 25 */
  --vaadin-grid-row-highlight-background-color: var(--alert-color);
}

@keyframes blinkEffect {
  0% {
    --alert-color: red;
  }
  50% {
    --alert-color: yellow;
  }
  100% {
    --alert-color: red;
  }
}

vaadin-grid {
  animation: blinkEffect 2s infinite;
}

But if you need an animation that only happens once and the part name is applied after the animation has run, then nothing happens. So this only works for infinite animations or animations that happen on the first render of the whole component.

2 Likes