Brightness and Saturation filters and transitions don't appear to work

[benwiley4000]

I'm not sure what filterBrightness and filterSaturation are - I can't find them referenced by this name anywhere on the internet (only filter: brightness(), etc) and I haven't seen any evidence that it's possible to transition individual filter types with independent durations, since they all live under the same CSS property.

[leMaik]

Oh... it's been wrong all the time and nobody seems to have noticed. Only the opacity was animated.

[benwiley4000]

@leMaik indeed. There's no exposure filter yet in CSS (brightness isn't really the same thing) so we can throw that out and just use the saturate filter.

Here's what I've got working locally:

  const [imageLoaded, setImageLoaded] = useState(false);
  const handleImageLoaded = useCallback(() => {
    setImageLoaded(true);
  }, []);
  const componentRef = useRef();
  const imageStyle = useMemo(() => {
    const { animationDuration } = componentRef.current
      ? componentRef.current.props
      : {};
    const timingAndDelay = 'cubic-bezier(0.4, 0, 0.2, 1) 0s';
    return {
      filter: imageLoaded ? 'saturate(1)' : 'saturate(0.2)',
      transition:
        animationDuration &&
        `filter ${animationDuration}ms ${timingAndDelay}, opacity ${animationDuration /
          2}ms ${timingAndDelay}`
    };
  }, [imageLoaded, componentRef]);
  return (
    <Image
      ref={componentRef}
      onLoad={handleImageLoaded}
      imageStyle={imageStyle}
      src={src}
    />
  );

EDIT: updated code to remove typescript syntax