位置元素：绝对；由于CSS动画而跳转

时间：2018-08-26 13:48:54

标签： html css css3 css-animations

我正在开发的网站上有一个怪癖。我正在使用绝对定位将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>

2 个答案:

答案 0 :(得分：2)

这是一个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>

或在部分添加position:relative 

* {
  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>

或将forwards添加到动画中，以保持最后的状态并保持transform属性的应用：

* {
  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也产生了塌陷）

换句话说，当您删除/添加动画时，您正在更改位置的参考。

通过添加position:relative或通过保持transform，即使在动画制作完成后，引用也始终保持不变。

从文档中：

  

绝对定位元素是其计算位置的元素   值是绝对值或固定值。顶部，右侧，底部和左侧   属性指定距元素包含的边缘的偏移量   阻止。 ref

还有

  

识别包含块的过程完全取决于   元素的position属性的值：

     
      

  1. ...

    2.   

  2. 如果position属性为绝对值，则包含块由最近的祖先元素的填充框的边缘形成，该元素的 position值不是static （固定值，绝对值，相对或粘性）。

    3.   
  3. ..
    4.   

  4. 如果position属性是绝对的或固定的，则包含块也可以由具有以下内容的最近祖先元素的填充框的边缘形成：

         
        

    1. 一个变换或除其他值之外的透视值

      2.   

    2. ...

      3.   

    3. ... ref

      4.   
    5.   

答案 1 :(得分：-1)

您可以尝试将position: relative添加到部分。

相关问题
最新问题