我可以将动画应用于页边距吗？ [英] Can I apply animations to margins?

问题描述

我正在尝试为CSS3边缘设置动画，此站点似乎说可以，但我不能上班

I'm trying to animate in CSS3 margins, which this site seems to say you can, but I can't get working.

我实际上有3个动画。 1用于在初始加载时进行简单的初始 fadeIn ，然后在单击时选择其他2用于 margin 动画。我也尝试过 margin 而不是顶部和底部，但是仍然没有任何作用的迹象。

I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working.

单击某个部分以查看动画切换。

Click on a section to see animation toggle.

$(".section").click(function() {
    $(this).toggleClass("open");
});

body{
    background: #f1f1f1;
}

.section{
    display: block;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
    margin: 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
</div>

这是一个JSFiddle： http://jsfiddle.net/ybh0thp9/3/

Here is a JSFiddle: http://jsfiddle.net/ybh0thp9/3/

推荐答案

您不需要为此的关键帧： http://jsfiddle.net/BramVanroy/ybh0thp9/7/

You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

您需要将transition属性添加到要设置动画的基本元素中。

You need to add the transition property to the base element that you wish to animate.

您还提到想要更改不透明度，但是考虑到您只有一个没有孩子的元素，我不知道这是怎么可能的。我的意思是：如果元素被隐藏，则无法单击。

You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children. I mean: you can't click on the element if it's hidden.

不过，您可以做的是在整个过程中增加不透明度： http://jsfiddle.net/BramVanroy/ybh0thp9/9/

What you can do, though, is add opacity to the whole thing: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

甚至更漂亮，进行转换：

Or even prettier, with a transformation:

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section {
    margin: 0;
    opacity: 0.7;
    transform: scale(0.85);
    transition: all 700ms;
}
.section.open {
    margin: 20px 0;
    opacity: 1;
    transform: scale(1);
}

---

每个注释，您想要淡入页面加载中的元素。我们可以通过添加一个类 init 来做到这一点。

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS

---

具有关键帧： http://jsfiddle.net/BramVanroy/ybh0thp9 / 14 /

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

-webkit-animation: fadeIn 1.5s ease;    
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;

这篇关于我可以将动画应用于页边距吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！