Question

我正在尝试在margin属性上创建一个侧边栏动画。我正在切换侧边栏上的hidden HTML属性以使其可访问。

我的问题是：为什么在第一次尝试后显示侧边栏的动画？如果我在addClass上添加任意超时，但是removeAttr不应该是同步的，那么它适用于后续尝试吗？

HTML

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="main"></div>
</div>

CSS

#sidebar { 
    margin-left: -200px;
    transition: margin 0.3s ease-out;
}

#wrapper.show-aside #sidebar {
    margin-left: 0;
}

JS

// Show sidebar
$('#sidebar').removeAttr('hidden');
$('#wrapper').addClass('show-sidebar');

// Hide sidebar
$('#wrapper').removeClass('show-sidebar');
setTimeout(function() {
    $('#sidebar').attr('hidden', 'hidden');
}, 300); // Wait for CSS transition to finish

Answer 1

添加hidden HTML属性后，会向元素添加display: none。 CSS过渡不会为display属性设置动画，因此它会创建钝的显示/隐藏效果。

我不确定hidden属性是否适用于此方案（请阅读MDN）

无论如何，如果你坚持要保留它，那么你必须添加setTimeout来添加类（因为它是hidden attr被移除后）并再次删除attr因为它在课后被隐藏了动画结束：

＆＃13;

$('#show').on("click", function(){
  $('#sidebar').removeAttr('hidden');
  setTimeout(function() { $('#wrapper').addClass('show-sidebar'); },310);
});

$('#hide').on("click", function(){
	$('#wrapper').removeClass('show-sidebar');
  setTimeout(function() { $('#sidebar').attr('hidden', true); },310);
});

＆＃13;

#wrapper {
  width: 400px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

#sidebar {
  width: 200px;
  height: 100%;
  left: -100%;
  background-color: red;
  position: absolute;
  transition: left 0.3s ease-out;
}

#wrapper.show-sidebar #sidebar { left: 0; }

#main {
  width: 100%;
  height: 100%;
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="sidebar"></div>
  <div id="main"></div>
</div>

<br/>
<button id="show">Show sidebar</button>
<button id="hide">Hide sidebar</button>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/s9ax6gm5/

Answer 2

不回答我的初始问题，但一个简单的解决方法是将侧边栏包装在另一个容器中，并在子容器上设置hidden属性，这样您就不会隐藏/显示容器，只是内容。

JSBin：http://jsbin.com/gulixegoha/1/edit?html,css,js,output

<div id="wrapper">
  <div id="sidebarWrapper">
    <div id="sidebar">Some content some content some content</div>
  </div>
  <div id="main"></div>
</div>

-

#sidebarWrapper { 
    margin-left: -200px;
    transition: margin 0.3s ease-out;
}

#wrapper.show-aside #sidebarWrapper {
    margin-left: 0;
}

-

$('#show').click(function() {
  $('#sidebar').removeAttr('hidden');
  $('#wrapper').addClass('show-sidebar');
});

$('#hide').click(function() {
  $('#wrapper').removeClass('show-sidebar');

  setTimeout(function() {
    $('#sidebar').attr('hidden', 'hidden');
  }, 300); // Wait for CSS transition to finish
});

使用CSS转换计时问题的jQuery操作

2 个答案: