javascript - 切换类时如何使div缓慢移动？

Question

<分区>

Answer 1

好吧，当你给 100% 时，即使 CSS 转换也不起作用。所以需要给定一个固定值，可以使用transition:

* {font-family: 'Segoe UI';}

.show-hide {overflow: hidden; height: 100px; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.show-hide.show {height: 500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" onclick="$('#show-hide').toggleClass('show'); return false;">Show / Hide</a>
<div class="show-hide" id="show-hide">
  <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
  <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
  <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
  <p>With the acquisition of Nokia's devices and services division to form Microsoft Mobile Oy, the company re-entered the smartphone hardware market, after its previous attempt, Microsoft Kin, which resulted from their acquisition of Danger Inc.</p>
  <p>Microsoft is a portmanteau of the words microcomputer and software.</p>
</div>

注意:当您进行过渡或制作动画时，百分比不起作用。请尝试提供值。

$(document).ready(function(){
  $("#toggle-btn").click(function(){
    $(".book").toggleClass("with-summary");
  });
});

* {
  transition: all 0.5s;
}

.book {
  height:500px;
  width:100%;
  position: relative;
  border:1px solid red;
}

.book-summary {
  position: absolute;
  left:-250px;
  top:0px;
  width:250px;
  height:100%;
  border:5px solid green;
  overflow-y: auto;
}

.book-body {
  position: absolute;
  right:0px;
  top:0px;
  left:0px;
  height:100%;
  border: 5px solid black;
  overflow-y: auto;
}


#toggle-btn:hover {
  cursor: pointer;
}



.book.with-summary .book-summary {
  left:0px;
}

.book.with-summary .book-body {
  left:250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="book">
  <div class="book-summary"></div>
  <div class="book-body">
     <button id="toggle-btn"> click me</button>
  </div>
</div>  <!-- book end -->