Css transitions on marked text

1

Hi! I’m trying to highlight some variables using markText() and make the highlight have a subtle fade-in, but I’m not being able to make the css transition work. Currently I’m a passing a className: "highlighted" and using the following css to add a background color to them:

.cm-variable {
    border-radius: 3px;
    transition: all 0.3s;
}

.cm-variable.highlighted {
    background-color: rgba(65, 105, 225, 0.15);
}

The class and background color get applied properly but the transition doesn’t work, does anyone know what may be the problem?

Huge thanks in advance!

2

The editor is redrawing the nodes whose marks changed, so CSS transitions don’t get started.

3

Ooooh, that was the problem. Will try to find a workaround and report back. Thanks for the quick response Marijn! (and for such an awesome editor :raised_hands:t3:)