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

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

我曾经尝试使用CSS属性

可见性
来显示或隐藏div，但它只是弹出，不会从侧面移动。

我还尝试了在细节视图中使用
左边距
的方法，但这破坏了我的整个布局

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

这是我的密码。红色的
details
div应该移动


功能切换按钮（）{
}
/*风格*/
.窗户{
高度：100vh；
宽度：100%；
溢出x：隐藏；
溢出y：隐藏；
}
.页眉，.页脚{
高度：50px；
颜色：白色；
背景色：黑色；
宽度：100%；
}
.阶段{
背景色：白色；
高度：计算（100%-100px）；
宽度：100%；
}
.导航{
背景颜色：浅灰色；
宽度：250px；
身高：100%；
浮动：左；
}
.内容{
背景色：浅灰色；
身高：100%；
宽度：计算（100%-400px）；
浮动：左；
}
.详情{
背景色：红色；
身高：100%；
宽度：150px；
浮动：对；
}
#试验台{
宽度：100%；
}
#测试表td{
文本对齐：居中；
垂直对齐：中间对齐；
}

标题
航行
名称
年龄
放置
细节
约翰
20
美国
玛丽
30
加拿大
提姆
40
德国
细节
页脚
这可以通过使用css动画属性来完成

这是我使用的代码：

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

然后添加到
.details

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

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

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

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

这是一个样品

HTML

JS

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

编辑

这是你的最新版本，试试看
 你想要什么；我喜欢使用jQueryUI

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

我还必须从小提琴上更改一些CSS，
details
div应该是
position:absolute

我还将您的输入字段更改为

（我没有使用
onClick=“toggleButton（）”
，而是给了输入一个
id
）

如果您想进一步了解jQuery
.toggle（）
效果；退房


它确实有点奇怪，这让我有点困惑。我会努力的（除非你喜欢）

goodluck:）
哦，等等，你不想让它一直移动。我会简单地更新我的小提琴。谢谢你的快速回答。有没有一种方法可以通过一个按钮触发这个动画，这样我就可以决定是否显示我的div了？其思想是将动画语句放入另一个类中，并在每次单击按钮时切换该类。对不起，我现在没有时间更改代码。我以后会换的。但也许你已经可以自己解决这个问题了。
.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*/
}

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

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