使用translateY（）移动隐藏的元素而不留空格

我想创建一个动画来显示用户单击某个元素时的某个部分。该部分在页面加载时保持隐藏状态（translateY(-700px)）。单击事件更改将切换类别._active在margin-bottom上使用转换属性会导致动画中FPS数量较低。使用translateY（）移动隐藏的元素而不留空格

问题：有没有办法在不隐藏空间的情况下为本节设置动画？对于部分

SASS代码如下

.section { 
    padding: 50px 0 20px 0; 
    background-color: black; 
    display: block; 
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05); 
    transform: translateY(-700px); 
    transition: transform 1s; 

    &._active { 
    transform: translate(0, 0); 
    margin-bottom: 0; 
    } 
}

来源

2017-02-22 mrkaluzny

不使用'translate'。这完全是**视觉效果。该元素不*实际*移动...它看起来像它。您可能需要负利润率。 [mcve]会很有用。 –

请参阅 - http://codepen.io/Paulie-D/pen/IuLfJ –

如果你想坚持翻译，一个选项也可以转换高度属性：https://jsfiddle.net/u3na98n8/ – Cam

当你使用translate，浏览器记住风格元素的实际大小。如果你能删除padding，一个选项，以接近它与translateY沿过渡height：

var toggler = document.getElementById("toggler"); 
 
var toggled = document.getElementById("toggled"); 
 

 
toggler.addEventListener("click", e => { 
 
    toggled.classList.toggle('_active'); 
 
})

.section { 
 
    /* padding: 50px 0 20px 0; */ 
 
    background-color: black; 
 
    color: white; 
 
    display: block; 
 
    height: 0; 
 
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05); 
 
    transform: translateY(-700px); 
 
    -webkit-transform: translateY(-700px); 
 
    transition: transform 1s, height 1s; 
 
    -webkit-transition: transform 1s, height 1s; 
 
} 
 
.section._active { 
 
    transform: translate(0, 0); 
 
    margin-bottom: 0; 
 
    height: 130px; /* adjust for your section content */ 
 
}

<button id="toggler">Toggle visibility</button> 
 

 
<section id="toggled" class="section"></section> 
 

 
<section> 
 
    <p> 
 
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet 
 
    </p> 
 
</section>

如果你将拥有自己的栏目内的任何内容，一个劈垫它正在使用与节背景颜色相同的border，并结合调整_active类中的height属性。

来源

2017-02-22 18:17:33 wscourge

其实，我想通了。

使用height和margin-bottom属性都会导致波涛汹涌的动画。唯一的方法（我在那种情况下遇到的）是在所有必须随元素移动的元素上使用transform: translateY()。

因此，我在网页上的每个部分添加了另一个类，并将其更改为transform属性。这样我就实现了我想要的流畅动画:)。请告诉我是否有更好的方法来做到这一点！

$('#panel').on('click', function() { 
 
    $('.new-class').toggleClass('down'); 
 
    $('.advanced-search').toggleClass('_active'); 
 
});

.hero { 
 
    height: 700px; 
 
    background-color: #FFD400; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#panel { 
 
width: 100%; 
 
color: white; 
 
background: #2E294E; 
 
font-weight: bold; 
 
font-family: Helvetica, sans-serif; 
 
text-align: center; 
 
padding: 30px 0; 
 
position: relative; 
 
z-index: 2; 
 
} 
 

 
.advanced-search { 
 
height: 700px; 
 
display: block; 
 
width: 100%; 
 
background: #D90368; 
 
text-align: center; 
 
margin-bottom: -700px; 
 
transform: translateY(-700px); 
 
transition: transform 1s; 
 
} 
 

 
.new-class { 
 
background-color: #F1E9DA; 
 
height: 300px; 
 
width: 100%; 
 
border: 1px solid white; 
 
text-align: center; 
 
font-family: Helvetica, sans-serif; 
 
transition: transform 1s; 
 
} 
 

 
.new-class.down { 
 
    transform: translateY(700px); 
 
} 
 

 
.advanced-search._active { 
 
    transform: translateY(0px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero"></div> 
 
<div id="panel"> Click to show </div> 
 
<div class="advanced-search"></div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div>

来源

2017-02-23 21:26:42 mrkaluzny

使用translateY（）移动隐藏的元素而不留空格

回答

相关问题