Question

我目前正在尝试为应用程序布局创建一个简单的clickdummy。此布局包含右侧的某种细节视图，这些视图不应始终可见，而是在您单击按钮后。我不知道如何使用CSS或jQuery实现这样一个移动div。

我alredy尝试使用CSS属性visibility来显示或隐藏div，但它只是弹出而不是从侧面移入。
此外，我尝试了在详细信息视图中使用margin-left的方法，但这破坏了我的整个布局。

那么实现这样一个移动div的最佳方式/最佳实践是什么？

以下是jsfiddle上的代码。红色details div是应移动的那个。

function toggleButton() {
	

}

/*STYLE*/
.window {
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
	overflow-y: hidden;
}
.header, .footer {
  height: 50px;
  color: white;
  background-color: black;
  width: 100%;
}
.stage {  
  background-color: white;
  height: calc(100% - 100px);
  width: 100%;
}

.navigation {
  background-color: lightgrey;
  width: 250px;
  height: 100%;
  float: left;
}

.content{
  background-color: dimgrey; 
  height: 100%;
  width: calc(100% - 400px);
  float: left;
}

.details {
  background-color: red;
  height: 100%;
  width: 150px;
  float: right;
}

#test-table {
  width: 100%;
}

#test-table td {
  text-align:center; 
  vertical-align:middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="window">  
        <div class="header">
          header
        </div>    
        <div class="stage">       
          <div class="navigation">
            navigation
          </div>      
          <div class="content">
            <table id="test-table" border=1>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Place</th>  
              <th>Details</th> 
            </tr>
            <tr>
              <td>John</td>
              <td>20</td>
              <td>USA</td>
              <td><input type="button" onclick="toggleButton()" value="i" /> </td>
            </tr>
            <tr>
              <td>Mary</td>
              <td>30</td>
              <td>Canada</td>
              <td><input type="button" onclick="toggleButton()" value="i" /> </td>
            </tr>
            <tr>
              <td>Tim</td>
              <td>40</td>
              <td>Germany</td>
              <td><input type="button" onclick="toggleButton()" value="i" /> </td>
            </tr>              
            </table>
          </div>      
          <div class="details" id="details">
            details
          </div>      
        </div>
        <div class="footer">
          footer
        </div>
      </div>
</body>

修改

我在this问题上找到了一个有趣的解决方案。我尝试使用这种方法（jsfiddle），但我的红色div不高。我该如何解决这个问题？

Answer 1

这可以通过使用css动画属性来完成。 Here is your updated fiddle

这是我使用的代码：

@keyframes move {
  0% { transform: translateX( 150px ) }
  50% { transform: translateX( 0 ) }
  100% { transform: translateX( 150px ) }
}

然后添加到.details

animation: move 1s ease;
animation-iteration-count: infinite;

Answer 2

有多种方法可以解决这个问题，正如elementzero23所说，你可以使用主要用css编写的关键帧。

当涉及多个更改时，您还可以使用JQUERY编辑css或添加/删除（切换）类。

我更喜欢使用JQUERY，因为它往往更简单，除非你有一些先决条件。

这是一个样本 https://jsfiddle.net/ksf9jsbg/

HTML

<div class="box1"></div>
<div class="box2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

CSS

.box1{
  position:absolute;
  top:0;
  left:0;
  width:20%;
  height:20%;
  background: #000;
}

.box2{
  position:absolute;
  top:50%;
  left:0;
  width:20%;
  height:20%;
  background: #090;
  transition: all 1.5s ease;  /*ADD THIS TO ENSURE SMOOTH MOVEMENT*/
}

JS

$('.box1').mouseup(function() {
$('.box2').css("transform", "translateX(300px)"); //THE MOST IMPORTANT PART
});

在这里，我只用类“box2”改变了div的transform属性。

修改

以下是fiddle的更新版本，请尝试一下。

Answer 3

你想要什么;我喜欢用jQuery UI

$( "#button1" ).on('click', function() {
   $( "#details" ).toggle( "slow" , function() {
     // Animation complete.
   });
});

我还必须从你的小提琴中改变你的一些CSS，details div应该是position:absolute;

我还将输入字段更改为<input type="button" id="button1" value="i" /> （而不是onClick="toggleButton()"，我给输入id）。

如果您想了解有关jQuery .toggle()效果的更多信息;检查this。

Updated fiddle

它确实有点奇怪，让我有点困惑。将继续努力（除非你喜欢）。

goodluck：）

创建从侧面滑入和滑出的动画div

3 个答案: