引脚淡入/淡出时闪烁

Question

我有一个mapbox地图，在地图上显示大头针（两个稍后一个用于大头针，一个用于文本）。大头针大约每2秒通过API更新一次。我想要创建的是让旧的大头针淡出，而新的大头针淡出引脚随数据变化而逐渐消失。我决定添加额外的层（2个用于初始加载，两个用于将来的调用和两个源，一个用于初始，一个用于将来。）然后随显示旋转。即初始加载层可见，称为api，填充了未来层然后在2秒钟内通过另一个api，并调用初始api填充新数据并逐渐淡入，而随后的层逐渐淡出，依此类推。问题在于，在淡出期间，亲密的.3不透明度会导致引脚闪烁（不透明度会跳到.6，然后跳到.2）。 这是我写得不好的代码

setUpSource(vue,data){
            vue.map.addSource('pin',{
                type: 'geojson',
                data: data.mapdata.geopoint
            });
            vue.map.addSource('updatedPin',{
                type: 'geojson',
                data: data.mapdata.geopoint
            });

        },
        setUpLayers(vue){
            vue.map.addLayer({
                "id": "points",
                "type": "circle",
                "source": "pin",
                "paint": {
                    "circle-radius": 3,
                    "circle-opacity":0,
                    "circle-opacity-transition":{duration:2500},
                    "circle-color": "#007cbf",
                }
            });

            vue.map.addLayer({
                "id": "updated-points",
                "type": "circle",
                "source": "updatedPin",
                "paint": {
                    "circle-radius": 3,
                    "circle-opacity":0,
                    "circle-opacity-transition":{duration:2500},
                    "circle-color": "#007cbf",
                }
            });
            vue.map.addLayer({
                "id": "points-labels",
                "type": "symbol",
                "source": "pin",
                "paint": {
                    "text-color": "#bbbbbb"
                },
                "layout": {
                    "visibility":'none',
                    "text-size": 13,
                    "text-field": "{title}",
                    "text-font": ["Roboto Regular"],
                    "text-offset": [0,0.6],
                    "text-anchor": "top"
                },

            });
            vue.map.addLayer({
                "id": "updated-points-labels",
                "type": "symbol",
                "source": "updatedPin",
                "paint": {
                    "text-color": "#bbbbbb"
                },
                "layout": {
                    "visibility":'none',
                    "text-size": 13,
                    "text-field": "{title}",
                    "text-font": ["Roboto Regular"],
                    "text-offset": [0,0.6],
                    "text-anchor": "top"
                },

            });
            vue.map.setPaintProperty("points","circle-opacity",1);
            vue.map.setLayoutProperty("points-labels","visibility","visible");
            vue.layoutState="points";
        }

 recurringApiCall(vue)
        {
            axios.get('*******',{
                params: vue.axiosParams
            })
                    .then(function (response){
                        vue.overlay=false;
                        vue.sessionParam++;
                        var data=response.data;
                        if(vue.mapStyle !== data.mapdata.style){
                            vue.mapStyle = data.mapdata.style
                            vue.setUpMap(vue,data);
                        }

                        if(vue.layoutState==="points"){
                            vue.map.getSource('updatedPin').setData(data.mapdata.geopoint);
                            vue.map.setPaintProperty("points","circle-opacity",0);
                            vue.map.setLayoutProperty("points-labels","visibility","none");
                            vue.map.setPaintProperty("updated-points","circle-opacity",1);
                            vue.map.setLayoutProperty("updated-points-labels","visibility","visible");
                            vue.layoutState="updatedPoints";

                        }else if(vue.layoutState==="updatedPoints"){
                            vue.map.getSource('pin').setData(data.mapdata.geopoint);
                            vue.map.setPaintProperty("points","circle-opacity",1);
                            vue.map.setLayoutProperty("points-labels","visibility","visible");
                            vue.map.setPaintProperty("updated-points","circle-opacity",0);
                            vue.map.setLayoutProperty("updated-points-labels","visibility","none");
                            vue.layoutState="points";
                        }

                        vue.updateChartData(data);
                    }).catch(function (error){
                if(typeof (error.response)!=='undefined'){
                    if(error.response.status===401){
                        vue.message="Token has expired,please relog in to Temetra"
                        vue.overlay=true;
                    }
                    if(error.response.status===503){
                        vue.message="Service is currently unavailable, please try again later"
                        vue.overlay=true;
                    }
                    if(error.response.status===404){
                        vue.overlay=true;
                        vue.message="No data found, please try again later"
                    }
                }else{
                    console.log(error);
                }
            }).finally(function (){
              vue.map.once("idle",function(){
                  if(vue.overlay){
                      vue.timerId=setTimeout(function (){
                          vue.recurringApiCall(vue)
                      },50000);
                  }else{
                      vue.timerId=setTimeout(function (){
                          vue.recurringApiCall(vue)
                      },2000);
                  }
              });
            });
        }

对不起，代码写得不好，但我只是一个初学者