Html flexbox平滑动画中的CSS转换项

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

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

2：当在除主页以外的任何其他页面上时，徽标/图标较小，并且与其他元素成比例地位于水平flexbox中

3：这两种状态之间有一个平稳的过渡

正如您在下面看到的，我已经实现了这一点，但是当页面完全变大时，转换是不稳定的。我对CSS和Angular都是新手，所以请原谅我的无知

我的问题:

是否有比我在这里提供的更好的方法来实现进入/离开flexbox动画，和/或是否有我缺少的CSS动画优化来进一步平滑此过渡

最终产品都将有一个类似的背景色，但我在这幅插图中选择了明亮的颜色来显示div在背景中做什么

注意：我尝试过使用“will change”（将更改）而没有实际效果，我知道我可以不使用angular（角度）来实现这一点，但除了这个简单的动画之外，还有一些功能将利用angular（角度）

这里还有一把小提琴：

/*角度*/
函数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=函数（）
{
如果（！$scope.ng_ISHOME）
{
$scope.ng\u div\u home=“div\u home\u scale\u down”；
$scope.ng_div_logo=“div_logo_scale_down”；
$scope.ng_div_logo_upper_container='div_logo_upper_container_scale_down'；
}
其他的
{
$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'；
}
log（“ishome是：”+$scope.ng_-ishome）；
};
}

/*css*/
html{
位置：相对位置；
最小高度：100%；
背景色：#22222；
}
身体{
背景色：#00000000；
}
/*位于导航栏顶部的容器，垂直增长，为扩展的徽标图标腾出空间*/
.div_徽标_上部容器
{
/*背景色：#111111*/
背景色：洋红色；
宽度：80%；
保证金：自动；
过渡：高度。5s线性；
利润率最高：5vw；
}
/*容纳导航元素的柔性容器*/
.nav_集装箱
{
/*背景色：#111111*/
背景颜色：黄色；
宽度：80%；
保证金：自动；
显示器：flex；
对齐项目：拉伸；
对齐项目：柔性端；
}
/*一个按比例缩放的div，强制其他flex元素响应*/
.div_home酒店
{
背景色：#00000000；
背景色：青色；
保证金：自动；
过渡：5s线性；
将更改：变换、宽度、弯曲等，；
}
/*一个包含徽标的div，可以进行实际的缩放和移动*/
.div_标志
{
填充：3倍；
保证金：3倍；
左边距：2vw；
过渡：5s线性；
将改变：宽度；
}
.img_标志
{
最大宽度：100%；
最大高度：100%；
最小宽度：8%；
最小高度：8%；
将改变：宽度；
会变：身高；
}
/*在其他flex元素中扩展主容器，为传入徽标腾出空间*/
.div_home_scale_
{
宽度：10vw；
弹性体：.5140px；
}    
/*收缩主容器以允许柔性图元扩展到创建的间隙中*/
.div\u home\u放大
{
宽度：3倍；
转换：转换（25vw，-10vh）；
自对准：居中；
}    
/*展开徽标容器*/
.div_logo_scale_
{
宽度：30vw；
边缘顶部：5vh；
}
/*收缩徽标容器*/
.div\u logo\u缩放\u
{
保证金：1vh；
宽度：10vw；
位置：静态；
}
/*展开导航容器上方的区域以包含较大的图标*/
.div\u徽标\u上部容器\u放大
{
高度：10vh；
}  
/*将上部容器收缩为图标文件，与其他元素一起放入*/
.div\u标志\u上部容器\u比例\u下部
{
高度：1px；
}  
.导航项目
{
flex:110px；
边缘底部：2vh；
字体系列：verdana；
字体大小：30px；
颜色：灰色；
文本对齐：居中；
保证金：3倍；
过渡：字体大小、颜色、变换、.5s线性；
}

两个

三个

四个

动画是“抖动”的，因为您一次设置了太多属性的动画，它们影响的不仅仅是绘制层和复合层

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

• 来自谷歌

对于这种类型的动画，普遍接受的解决方案是在DOM中为两个动画状态中的每一个都有一个元素。它们都应该被定位（除了

静态

之外的任何

位置

值都可以）。您将使用

transform

为起始状态元素设置动画，使其朝向目标状态元素的位置和大小。通过了解每一项，您可以确定进行精确转换所需的转换）

到目前为止，这种方法的最大优点是，正在设置动画的元素在文档流中保持在相同的位置，并且通过不调整大小或移动，它不会触发后续DOM元素或父元素的回流。仅移动其渲染投影

动画结束后，可以切换两个元素的

可见性

和