> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Add a fade effect when showing and hiding a layer This example uses [`fill-opacity-transition`](https://docs.mapbox.com/style-spec/reference/transition/) to create a fade effect when changing a layer's [`opacity`](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-fill-opacity). When the "Fade Out" button is clicked, [`setPaintProperty`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#setpaintproperty) is used to update the fill layer's `fill-opacity-transition` and `opacity` properties. `fill-opacity-transition` is then set to the value specified by the slider, and `opacity` is toggled (from 1 to 0 for fade out or from 0 to 1 for fade in) > Example code: **JavaScript** ```html Add a fade effect when showing and hiding a layer

Duration (ms)

``` **React** ```jsx import React, { useEffect, useRef, useState } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); const [fadeText, setFadeText] = useState('Fade Out'); const [sliderValue, setSliderValue] = useState(500); // Consume fill-opacity-transition, switch between fade out and // fade in on click, and fade. function handleClick() { mapRef.current.setPaintProperty('maine', 'fill-opacity-transition', { duration: parseInt(sliderValue) }); if (fadeText === 'Fade Out') { setFadeText('Fade In'); mapRef.current.setPaintProperty('maine', 'fill-opacity', 0); } else { setFadeText('Fade Out'); mapRef.current.setPaintProperty('maine', 'fill-opacity', 1); } } // Handle slider change & updating fill opacity transition state function handleChange(e) { setSliderValue(e.target.value); } useEffect(() => { mapRef.current = new mapboxgl.Map({ // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', container: mapContainerRef.current, style: 'mapbox://styles/mapbox/standard', config: { basemap: { theme: 'monochrome' } }, center: [-68.137343, 45.137451], zoom: 5 }); mapRef.current.on('load', () => { mapRef.current.addSource('maine', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', // These coordinates outline Maine. coordinates: [ [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573, 43.09008], [-70.75102, 43.08003], [-70.79761, 43.21973], [-70.98176, 43.36789], [-70.94416, 43.46633], [-71.08482, 45.30524], [-70.66002, 45.46022], [-70.30495, 45.91479], [-70.00014, 46.69317], [-69.23708, 47.44777], [-68.90478, 47.18479], [-68.2343, 47.35462], [-67.79035, 47.06624], [-67.79141, 45.70258], [-67.13734, 45.13745] ] ] } } }); mapRef.current.addLayer({ id: 'maine', type: 'fill', source: 'maine', layout: {}, paint: { 'fill-color': '#0080ff', 'fill-opacity': 1, 'fill-opacity-transition': { duration: 500 } } }); mapRef.current.addLayer({ id: 'outline', type: 'line', source: 'maine', layout: {}, paint: { 'line-color': '#000', 'line-width': 3 } }); }); }, []); return (

Duration (ms)

); }; export default MapboxExample; ```