Question

你好，我在这个div上有一个div和关闭按钮

和简单的CloseMyDiv函数隐藏我的div

function CloseMyDiv(){
  document.getElementById('myDiv').style.display = 'none';
}

如何添加css过渡之类的动画

Answer 1

您无法设置display属性的动画，但可以更改元素的opacity。就像@Gerard在评论中说的那样，请使用CSS类。所以，像这样。

const div = document.querySelector('div')
document.querySelector('button').addEventListener('click', function(){
    div.classList.toggle('hidden')
})

div { transition: 0.5s }
.hidden { opacity: 0 }

<button>Show/hide</button>
<div>i am a div.</div>

如果您不希望div在隐藏时占用空间，也可以向transform:scale(0)添加height:0或.hidden。

Answer 2

如@rmn所述，您无法为display属性设置动画，并且不希望div在关闭后占用空间，因此可以应用以下示例代码：-

HTML-

<div id="myDiv">Just a div</div>
<button id="btn" type="button">Close Div</button>

CSS-

div{
  width:200px;
  height:200px;
  background:white;
  color:black;
  border:1px solid black;
  transition:all 2s;
  overflow:hidden;
}

.closed{
  height:0px;
  width:0px;
  border:0;
}

JavaScript-

function closeMyDiv(){
  document.getElementById('myDiv').classList.toggle('closed');
}

document.getElementById('btn').onclick = function(){
  closeMyDiv();
}

这是小提琴-http://jsfiddle.net/m07nhzsk/13/

希望这会有所帮助。欢呼！！

Answer 3

如果您想要滑动动画，可以尝试使用非常短的jQuery代码（尽管它仍然是Javascript）。

$('#closeBtn').click(function(){
    $('.toBeClosed').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="toBeClosed">Div element</div>
<button id="closeBtn">Close</button>

如果您希望代码无需点击即可运行，则可以轻松删除点击功能。

CSS在JavaScript更改样式上的过渡

3 个答案: