css transform 会影响position 定位

比如通过以下代码.实现导航条上的每个li栏目,以不同的时间间隔,从上向下移动进来并显示

.my-navbar ul li {
	position: relative;
	opacity: 0;
	transform: translateY(-30px);
	transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .6s cubic-bezier(.165,.84,.44,1);
will-change: transform,opacity
}
.my-navbar ul li:nth-of-type(1) {
	transition-delay: 525ms
}
.my-navbar ul li:nth-of-type(2) {
	transition-delay: 550ms
}
.my-navbar ul li:nth-of-type(3) {
	transition-delay: 575ms
}
.my-navbar ul li:nth-of-type(4) {
	transition-delay: .6s
}
.loaded .my-navbar ul li {
	opacity: 1;
	transform: translateY(0)
}

但是,如果my-navbar ul li 这个

• 标签里面还有子元素.并且这个子元素是需要进行绝对定位之类的,则会失效.比如以下代码的位置会失效

• .my-navbar ul  li .menu {
      top: 570px;
      position: absolute;
      left: 0px;
      width: 1143px;
     
  }
  

  解决办法是.动画操作的对象不应该是包含子元素的li,可以是li下面的a这个子元素.比如这样就行了

  
  .my-navbar ul li a{
  	opacity: 0;
  	transform: translateY(-30px);
  	transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .6s cubic-bezier(.165,.84,.44,1);
  	will-change: transform,opacity
  }
  .my-navbar ul li:nth-of-type(1)  a {
  	transition-delay: 525ms
  }
  .my-navbar ul li:nth-of-type(2)  a{
  	transition-delay: 550ms
  }
  .my-navbar ul li:nth-of-type(3) a {
  	transition-delay: 575ms
  }
  .my-navbar ul li:nth-of-type(4) a {
  	transition-delay: .6s
  }
  .loaded .my-navbar ul li a {
  	opacity: 1;
  	transform: translateY(0)
  }
  

  如下图,li下面还有menu这个子元素.所以.动画修改到a上.