html – 位置元素：绝对;因为CSS动画而跳跃

2019年7月28日 164次阅读

我在开发的网站上有一个怪癖.我使用绝对定位将H1标题放在内容的左侧.在完整的代码中,这只发生在大于1280px的屏幕尺寸上,并且效果比我演示的这个小提琴要严重得多.正如您所看到的,标题“等待”直到动画完成才跳到其绝对位置.

我怎么能避免这种跳跃？我真的很想从头开始动画到正确的位置.每页绝对定位总会有一个H1标题.我正在使用绝对定位,因为标题可能来自页面上的任何位置.如果有更好的方法来做到这一点,我全都耳朵.

https://jsfiddle.net/v2keq3hy/5/

    * {
      font-family: Sans-serif;
    }
    
    section {
    		width:1200px;
    		margin:0 auto;
        -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 1s; /* Firefox < 16 */
        -o-animation: fadein 1s; /* Opera < 12.1 */
        animation: fadein 1s;
    	}
      
    @keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    @-moz-keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    @-webkit-keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    @-o-keyframes fadein {
        from { opacity: 0; transform: translate(100px);}
        to   { opacity: 1; transform: translate(0);}
    }
    
    
    	article * {
    		max-width: 600px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    	
    	article p {
    		margin: 19px auto 19px auto;
    	}
    	
    	article h1 {
    		position: absolute;
    		top: 150px;
    		max-width: 250px;
    		margin: 0 auto;
    	}
<section>

  <article>

    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    <h1>
      Lorem Impsum
    </h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

  </article>

</section>

最佳答案 这是一个
containing block问题.要修复它,您需要在元素中保留transform属性,因为包含绝对定位元素块的转换更改：

* {
  font-family: Sans-serif;
}

section {
		width:1200px;
		margin:0 auto;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    transform: translate(0);
	}
  
@keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-moz-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-webkit-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-o-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}


	article * {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	
	article p {
		margin: 19px auto 19px auto;
	}
	
	article h1 {
		position: absolute;
		top: 150px;
		max-width: 250px;
		margin: 0 auto;
	}
<section>

		<article>

			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
			<h1>
				Lorem Impsum
			</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

		</article>
			
	</section>

或添加位置：相对于部分：

* {
  font-family: Sans-serif;
}

section {
		width:1200px;
		margin:0 auto;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    position:relative;
	}
  
@keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-moz-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-webkit-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-o-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}


	article * {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	
	article p {
		margin: 19px auto 19px auto;
	}
	
	article h1 {
		position: absolute;
		top: 150px;
		max-width: 250px;
		margin: 0 auto;
	}
<section>

		<article>

			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
			<h1>
				Lorem Impsum
			</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

		</article>
			
	</section>

或者向前添加动画以保持最后一个状态并保持应用转换属性：

* {
  font-family: Sans-serif;
}

section {
		width:1200px;
		margin:0 auto;
    -webkit-animation: fadein 1s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s forwards; /* Firefox < 16 */
    -o-animation: fadein 1s forwards; /* Opera < 12.1 */
    animation: fadein 1s forwards;
	}
  
@keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-moz-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-webkit-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}

@-o-keyframes fadein {
    from { opacity: 0; transform: translate(100px);}
    to   { opacity: 1; transform: translate(0);}
}


	article * {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	
	article p {
		margin: 19px auto 19px auto;
	}
	
	article h1 {
		position: absolute;
		top: 150px;
		max-width: 250px;
		margin: 0 auto;
	}
<section>

		<article>

			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
			<h1>
				Lorem Impsum
			</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

		</article>
			
	</section>

为什么？

最初,您的元素相对于视口定位,因为没有父元素的位置与静态不同.将转换属性应用于其父级会更改包含块,因此您的元素将相对于它定位,从而创建跳转效果,因为有一些默认边距应用于正文(以及来自p的边距匹配)

换句话说,当您删除/添加动画时,您正在更改位置的引用.

通过添加位置：相对或通过保持变换,即使在动画完成后,也始终保持引用相同.

从文档：

An absolutely positioned element is an element whose computed position
value is absolute or fixed. The top, right, bottom, and left
properties specify offsets from the edges of the element’s containing
block. 07001

和

The process for identifying the containing block depends entirely on
the value of the element’s position property:

  1. …

  2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

  3. ..

  4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:

    1. A transform or perspective value other than none

    2. …

    3. …07002

点赞