Question

我得到了一些元素，当一个事件被触发时，其中一个被删除或添加到DOM中，当发生这种情况时，剩下的元素会四处移动以找到它们在DOM上的正确位置，我想要的是动画那个运动。

有什么想法吗？我想只在可能的情况下使用CSS。

请注意，单击按钮时，元素2会关闭或打开，其他元素会移动，我希望该动画能够动画化。

这是我的代码

＆＃13;

	$('button').click(function(){
	    element = $('#dos').is(":visible");
	    if(!element){
		    $('#dos').show();
		}
	    else{$('#dos').hide();}	
	})

＆＃13;

section{
	margin:auto;
	display:block;
	text-align:center;
}
#uno{
	width:200px;
	background:rgba(255,229,0,1.00);
	height:100px;
	display:inline-block;
}
#dos{
	width:200px;
	background:rgba(0,255,60,1.00);
	height:100px;
	display:inline-block;
}
#tres{
	width:200px;
	background:rgba(232,0,255,1.00);
	height:100px;
	display:inline-block;
}
button{

	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <section>
<div id="uno">1</div>
<div id="dos">2</div>
<div id="tres">3</div><br>
<button>Click</button>
</section>

＆＃13;

Answer 1

如果您希望在CSS中完成，请使用.addClass() / .removeClass()代替.show()和.hide()。了解keyframes - 它简单直观，可以完全控制CSS动画。它很简单：

@keyframes hide-animation {
  to {
    width: 0%;
    visibility: hidden;
  }
}

.hidden {
   animation: hide-animation .3s linear forwards;
}

您可以将所需的任何动画绑定到要添加的类。这是您的JSFiddle工作隐藏动画。

Answer 2

我很难在不知道您想要哪种运动的情况下给出确切的答案，但是我会坚持下去。

一种通用的解决方案是将要隐藏/显示的元素放在容器div中，然后为容器div的宽度或高度设置动画。让我看看是否可以给您提供垂直示例：

HTML：

<div id="uno">1</div>
<div id="dos-container">
    <div id="dos">2</div>
</div>
<div id="tres">3</div>

CSS：

#uno{
    height:100px;
}
#dos{
    height:100px;
}
#dos-container{ /* same height as dos if starting visible, if starting hidden set to 0*/
    height:100px;
}
#tres{
    height:100px;
    }

JS（带有jquery）：

$('button').click(function(){
    element = $('#dos').is(":visible");
    if(!element){
        //animate container height to match content div height
        $('#dos-container').animate({height: "100px")},500); //500 is the speed of the animation
        //show content in container
        $('#dos').show();
    }
    else{
        //animate container height to 0
        $('#dos-container').animate({height: "0px")},500);
        //then hide content div
        $('#dos').hide();
    }   
})

如果元素移动，如何使用css或jquery为该移动设置动画？

2 个答案: