Transition Between Mapbox Basemap Layers

Currently building a web application with Mapbox. I'd like to replicate the transition between basemaps, as you might see while using Google Maps:

The Mapbox API only seems to offer a setStyle method for map objects, but that leads to the tiles re-rendering (Not nearly as aesthetically pleasing). My current implementation is to render two mapbox canvases, sync them and use a css-transition to fade between them. Essentially:

function changeStyle(input) {
    var id = input.target.id;
    var map = document.getElementById('map');
    var map2 = document.getElementById('map2');

    if(id == 'dark'){
        map.style.opacity = 1;
        map2.style.opacity = 0;
    }
    else if(id == 'satellite'){
        map.style.opacity = 0;
        map2.style.opacity = 1;
    }

}

See CodePen for full implementation.

This has the obvious limitation of rendering two maps (performance cost, and twice the expense on map renders) and adds the complexity of re-rendering additional layers. Either I manipulate the maps in sync, or I re-render additional layers on transition. Regardless, this method is not sustainable.

Mapbox does have features to load third-party vector tiles and add a transition property to layers. Is it possible to load Mapbox tiles as independent layers, and use a transition property between them? Alternatively, is there a callback for loading Mapbox layers that I could use to render layers invisibly and fade in when loading is complete?

Or is it possible to implement this in a far more efficient manner than I have done so far.

Advice and discussion greatly appreciated.