mapbox / mapbox/mapbox-gl-js

*-opacity-transition does not work with data-driven case expressions

Open
#13,507 1 comment 0 reactions 0 assignees View on GitHub
auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

`line-opacity-transition` does not appear to work when `line-opacity` is defined using a data-driven expression like `case`. When feature properties change (e.g., via `setFeatureState` or geojson property mutation), the expected fade transition between opacities does not occur.

---

### Steps to Reproduce

1. Add a line layer with paint properties like:

```js
'line-opacity': [
'case',
['==', ['get', 'selected'], true],
1,
0.2
],
'line-opacity-transition': {
duration: 300,
delay: 0
}
```

2. Toggle the selected property of a feature either by:

- updating the GeoJSON source and calling setData()
- or using setFeatureState() if feature-state is used in the expression

3. Observe that the line opacity jumps immediately instead of transitioning.

### Expected Behavior

A smooth fade transition between opacity values (e.g. from 0.2 to 1) when the feature's selected property changes.

### Actual Behavior

The line-opacity value changes instantly with no transition, even though line-opacity-transition is defined.

### Environment

- Mapbox GL JS version: 3.8.0
- Browser: [Chrome]
- OS: [macOS]

This appears to be a limitation of transitions and expression-based paint properties. Would it be possible to support transitions even when line-opacity is a data-driven expression?

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the case-expression behavior with line-opacity-transition, first through setData() and then setFeatureState() as described. Trace how the line-opacity expression and its transition are evaluated, and verify done when a feature-property change produces the expected smooth fade instead of an immediate opacity jump.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.