Animated slide out rect using d3 on click

HTML

<button type="button" id="actionButton">Click Me!!!</button>
<div id="main" width="600" height="400">
     
</div>

CSS

#actionButton {
    
}

JavaScript

var duration = 1000;

var animateDiv = function(target){
    d3.select('#animationArea').remove();
    
    var animationArea = target.append('g').attr('id', 'animationArea')

    var line = animationArea.append('line')
                  .attr('id', 'line')
                  .attr("x1", 100)
                  .attr("y1", 200)
                  .attr("x2", 100)
                  .attr("y2", 200)
                  .transition()
                  .duration(duration)
                  .attr("x2", 100)
                  .attr("y2", 10)
                  .attr("stroke-width", 2)
                  .attr("stroke", "black");
    
    var rect = animationArea.append('rect')
                            .attr('fill', '#fff')
                            .attr('id', 'rect')
                            .attr('height', 190)
                            .attr('width', 0)
                            .attr('x', 100)
                            .attr('y', 10);
    
    rect.transition()
        .duration(duration)
        .delay(duration)
        .attr('stroke', '#000')
        .attr('stroke-width', 3)
        .attr('width', 2000)
                     

}

var svg = d3.select('#main')
                .append('svg')
                .attr('width',600)
                .attr('height',400);
d3.select('#actionButton').on('click', function() { return animateDiv(svg);});