Question

我正在为网站构建基本导航，而我想要的图形/动画功能是这样的：

1：处于“ HOME”状态时，站点徽标/图标较大且居中，并位于其余导航/页面链接上方。

2：在首页以外的其他页面上，徽标/图标较小，并且与其他元素成比例地放置在水平flexbox中。

3：这两个状态之间有一个平滑的过渡。

我已经实现了这一点，如您在下面看到的那样，但是当页面已满时，过渡会令人不安。我是CSS和Angular的新手，所以请原谅我的无知。

我的问题：

是否有比我这里提供的更好的方法来实现Flexbox动画的进/出，和/或是否缺少CSS动画优化来进一步平滑过渡？

最终产品都将具有相似的背景颜色，但是在此图中，我选择了鲜艳的颜色来显示div在背景中的作用。

注意：我已经尝试过使用'will-change'来达到没有真正的效果，而且我知道我可以不使用角度来做到这一点，但是除了这个简单的动画之外，还有一些功能可以在将来利用角度。

这里也是一个小提琴： https://jsfiddle.net/willcthomson/f6wk4Lpq/

/* angular */ 
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);
  				};


}

/* 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
  {
    height: 10vh;
  }  

/*shrinks the upper container as the icon files in with other elements  */
.div_logo_upper_container_scale_down
  {
    height: 1px;
  }  

.nav_items
    {
    flex: 1 1 10px;
    margin-bottom: 2vh;

    font-family: verdana;
    font-size: 30px;
    color:grey;
    text-align: center;
    margin: 3px;
    transition: font-size, color, transform, .5s linear;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!--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 -->

asdf

Answer 1

动画是“抖动的”，因为您一次要设置过多的属性，并且它们影响的范围比“绘画”和“合成”层更多。

如果您发现上述声明含糊不清，请参阅这两篇文章：

Rendering Performance来自Google
High Performance Animations。

这种动画的普遍接受的解决方案是在DOM中为两个动画状态的每一个都包含一个元素。它们都应该定位（position以外的任何static值都可以）。您将使用transform为目标状态元素的位置和大小设置起始状态元素的动画。通过在每一个上获得.getBoundingClientRect()，您可以确定进行精确过渡所需的必需转换。

到目前为止，此方法的最大优点是，被动画化的元素在文档流中保持相同的位置，并且由于不进行大小调整或移动，它不会触发后续DOM元素或父元素的重排。仅其渲染的投影被移动。

动画结束后，您可以切换两个元素的visibility并从刚制作动画的元素中删除transform（现已隐藏-您希望为此更改设置animation-duration:0s;），以便将渲染的投影重置回DOM中的正常位置。

FlexBox平滑动画的进出CSS过渡项目

1 个答案: