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)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

• .my-navbar ul  li .menu {
      top: 570px;
      position: absolute;
      left: 0px;
      width: 1143px;
     
  }
  1
  2
  3
  4
  5
  6
  7

  解决办法是.动画操作的对象不应该是包含子元素的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)
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

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