Tengo una simple iniciación de elementos HTML y Bootstrap de la siguiente manera:

 <div class="container-fluid d-flex g-0 gap-3" id="map-div"> <div class="row-fluid d-flex g-0 justify-content-around" id="map-row"> <div class="d-flex g-0" id="map-col"> <svg id="map-svg"></svg> </div> </div> </div>

En mi JavaScript, bajo ciertas condiciones, agrego un hermano al map-col de la siguiente manera:

 legend = d3.select("#map-row").insert("div") .attr("id", "legend-col") .attr("class", "g-0 fade-in shadow lh-sm") .style("height", "80%") .style("align-self", "center")

¿Existe una manera simple (¿quizás con etiquetas Bootstrap?) de animar la transición map-col a su nueva ubicación sin una especificación explícita, similar a "data-mdb-animation": "slide-left" ?