flexbox animation question

Stack overflow question about transitioning an item in and out of a CSS flexbox.

by willcthomson

HTML

<div ng-app>
<div ng-controller="mainCtrl">

<div class="div_logo_upper_container" ng_class="ng_div_logo_upper_container"></div>
<div class="nav_container">
    <div class = "div_home" ng-class="ng_div_home">
      <div class = "div_logo" ng-class="ng_div_logo" ng-click="ng_ISHOME=true;f_scale();">
        <img  class = "img_logo" src="https://avatars1.githubusercontent.com/u/579414?s=200&v=4" > 
      </div>
    </div>
  	<div  class = "nav_items">  	
  		<p ng-click="ng_ISHOME=false;f_scale();">Two</p>
  	</div>
  	<div class = "nav_items">
  		<p ng-click="ng_ISHOME=false;f_scale();">Three</p>
  	</div>
  	<div class = "nav_items">
  		<p ng-click="ng_ISHOME=false;f_scale();">Four</p>
  	</div>
    
  </div> <!-- end nav_container -->
  </div> <!-- end ctrl -->
  </div> <!-- end app -->

CSS

html{
  position: relative;
  min-height: 100%;
  background-color: #222222;
  }

body{
  background-color: #00000000;
  }


/*a container that sits on top of the nav bar and grows vertically to make room fo the expanding logo-icon*/
.div_logo_upper_container 
  {
    /* background-color: #111111; */
    background-color: magenta;
    width: 80%;
    margin: auto;
    transition: height .5s linear;
    margin-top: 5vw;
  }

/*a flex container to hold nav elements*/
.nav_container 
  {
    /* background-color: #111111; */
    background-color: yellow;
    width: 80%;
    
    margin: auto;
    display: flex;    
    
    align-items: stretch;
    align-items: flex-end;
 
  }
  

/*a div that scales forcing the other flex elements respond */
.div_home
    {
      background-color: #00000000;
      background-color: cyan;
      margin: auto;
      transition: .5s linear;
      will-change: transform, width, flex,;
    }

/*a div that holds the logo, and does the actual scaling and movement*/
.div_logo    
    {
      padding: 3px;
      margin: 3px;
      margin-left: 2vw;
      transition:  .5s linear;
      will-change: width;
    }

.img_logo   
    {
    max-width:100%;
    max-height: 100%;
    min-width: 8%;
    min-height: 8%;
    will-change:width;
    will-change:height;
    }

/*expands the home container amongst the other flex elements to make room for incoming logo*/
.div_home_scale_down
  {
    width: 10vw;
    flex: .5 1 40px;
  }    

/*shrinks the home container to allow flex elements to expand into the created gap*/
.div_home_scale_up
  {
    width: 3px;
    transform: translate(25vw,-10vh);
    align-self: center;
  }    

/*expands the logo container*/
.div_logo_scale_up
  {
    width: 30vw;
    margin-top: 5vh;
  }

/*shrinks the logo container*/
.div_logo_scale_down
  {
    margin: 1vh;
    width: 10vw;  
    position: static;

  }

/*expands the area above the nav container to contain the larger icon*/
.div_logo_upper_container_scale_up
  {
   ...

JavaScript

function mainCtrl($scope) { 

  		$scope.ng_div_home = 'div_home_scale_up';
      $scope.ng_div_logo = 'div_logo_scale_up';
      $scope.ng_div_logo_upper_container = 'div_logo_upper_container_scale_up';
      $scope.ng_logo = '';
      $scope.ng_ISHOME = true;

  		$scope.f_scale = function()
  				{
            if(!$scope.ng_ISHOME)
              {
              $scope.ng_div_home = "div_home_scale_down";
              $scope.ng_div_logo = "div_logo_scale_down";
              $scope.ng_div_logo_upper_container = 'div_logo_upper_container_scale_down';
              }
            else
              {
              $scope.ng_div_home = "div_home_scale_up";
              $scope.ng_div_logo = "div_logo_scale_up";
              $scope.ng_div_logo_upper_container = 'div_logo_upper_container_scale_up';
              }
            console.log("ishome is:"+$scope.ng_ISHOME);
  				};


}