将剪辑路径应用于父元素会导致子元素的动画不稳定

debugcn 发表于 Dev

用户7226463

目前，我在 css 中遇到了带有 clip-path 属性的奇怪错误。我正在应用多边形剪辑路径在我为我的工作开发的这个登陆页面上创建一个有角度的部分。问题是，每当我应用剪辑路径时，此父容器内具有过渡的任何子元素都会变得不稳定。我打开/关闭了属性，出于某种原因，每当我删除剪辑路径属性时，动画又会变得平滑吗？

点击查看我的jsfiddle

下面是html和css：

HTML

<header class="gs_hero">
 <div class="container-fluid">
    <div class="row">
        <section class="gs_hero_contents">
            <div class="gs_hero_callout">
                <h1>Getting Started</h1>
                <p>7 Steps To Setting Up Your Artwork</p>
                <button class="gs_lm_btn" id="gs_lm_btn">Learn More</button>
            </div>
        </section>
    </div>
 </div>
</header>

CSS

.gs_hero {
  background: url(../img/custom_journey_header.jpg) no-repeat;
  background-position: 0 60%;
  background-size: cover;
  position: relative;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 70%, 0 100%);
  clip-path: polygon(0 0, 1600px 0, 1600px 70%, 0 100%);
  transition: -webkit-clip-path 0.35s, clip-path 0.35s;
}
.gs_hero:before {
  content: "";
  display: block;
  background-color: rgba(130, 29, 33, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gs_hero_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.gs_hero_contents h1 {
  font-size: 25px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}
.gs_hero_contents p {
  font-size: 19px;
  margin: 8px auto;
}
.gs_hero_callout {
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin: 60px auto 0;
}
.gs_lm_btn {
  background-color: rgba(236, 54, 66, 1);
  border: none;
  border-radius: 38px;
  color: rgba(255, 255, 255, 1);
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  outline: none;
  margin: 15px auto 0;
  padding: 12px;
  width: 160px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-transition: box-shadow 425ms ease, opacity 425ms ease, 
  transform 425ms ease;
  -moz-transition: box-shadow 425ms ease, opacity 425ms ease, transform 
  425ms ease;
  -o-transition: box-shadow 425ms ease, opacity 425ms ease, transform 
  425ms ease;
 }
 .gs_lm_btn:hover {
    box-shadow: 0 33px 35px -10px rgba(0,0,0,0.15);
    opacity: 0.8;
    transform: translateY(2px);
 }

一个儿子

由于它似乎无法正常使用clip-path，并且由于clip-path浏览器支持不佳，因此一种解决方法可能是transform: skew用于创建倾斜/倾斜的底部

/*********************************************************************
- overrides
*********************************************************************/
body {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h2 {
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.content {
    padding: 0;
    /*min-height: 4000px;*/
}
.content-wrapper {
    background-color: rgba(255,255,255,1);
}
/*********************************************************************
- gs hero parent
*********************************************************************/
.gs_hero {
    background: url(../img/custom_journey_header.jpg) no-repeat;
    background-position: 0 60%;
    background-size: cover;
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
}
.gs_hero:before {
    content: "";
    display: block;
    background-color: rgba(130, 29, 33, 0.75);
    position: absolute;
    transform: skewY(-3deg);
    top: -50%;
    left: 0;
    width: 100%;
    height: 130%;
}
/*********************************************************************
- gs hero contents
*********************************************************************/
.gs_hero_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /*margin: 10vh auto;*/
}
.gs_hero_contents h1 {
    font-size: 25px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}
.gs_hero_contents p {
    font-size: 19px;
    margin: 8px auto;
}
.gs_hero_callout {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin: 60px auto 0;
}
.gs_lm_btn {
    background-color: rgba(236, 54, 66, 1);
    border: none;
    border-radius: 38px;
    color: rgba(255, 255, 255, 1);
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    outline: none;
    margin: 15px auto 0;
    padding: 12px;
    width: 160px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -webkit-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
    -moz-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
    -o-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
}
.gs_lm_btn:hover {
    box-shadow: 0 33px 35px -10px rgba(0,0,0,0.15);
    opacity: 0.8;
    transform: translateY(2px);
}

<header class="gs_hero">
	<div class="container-fluid">
		<div class="row">
			<section class="gs_hero_contents">
				<div class="gs_hero_callout">
					<h1>Getting started</h1>
					<p>7 Steps To Setting Up Your Artwork</p>
					<button class="gs_lm_btn" id="gs_lm_btn">Learn More</button>
				</div>
			</section>
		</div>
	</div>
</header>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。