css transform 会影响position 定位

news2024/11/20 20:44:34

比如通过以下代码.实现导航条上的每个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)
}