*-opacity-transition does not work with data-driven case expressions
- 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
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