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