Javascript 创建类似Spotify的div转换

我想对CSS或JavaScript中div的转换提供一些帮助

我有一个

和

dispay:none。
对于一些JS，我更改了
display:block
上的显示选项。
一切正常

但是我想知道当
出现在屏幕上时如何进行转换。
当你想搜索某个东西时，就像玩家一样

谢谢你的帮助。
真的很抱歉我的英语不好
 您可以使用如下JQuery来实现：


$（函数（）{
var open=false；
$（'.menubar span'）。单击（函数（）{
如果（open==false）{
$（'.search'）.css（'left'，'50px'）；
开放=真实；
}
否则{
$（'.search'）.css（'left'，'-100px'）；
开=假；
}
});
});
菜单{
位置：固定；
左：0；
排名：0；
宽度：50px；
身高：100%；
背景：#222021；
z指数：4；
}
梅努巴先生{
宽度：50px；
身高：100%；
颜色：白色；
字体系列：arial；
}
.搜索{
位置：绝对位置；
左：-100px；
排名：0；
宽度：100px；
背景：浅灰色；
身高：100%；
-o-转变：.3s；
-ms转换：.3s；
-moz跃迁：.3s；
-webkit转换：.3s；
过渡：.3s；
}
.搜索输入{
保证金：0；
宽度：75px；
边框：1px纯黑；
}

家
以下答案使用CSS样式的声明来实现转换效果

如果在元素上声明
转换：所有1
样式。如果该元素的样式属性发生更改，浏览器（用户代理）的图形设备将计算并更新两种状态（初始状态和结束状态）之间发生的帧（或视觉更改）。但是，正在更改的属性必须是标量；也就是说，初始值和新值都是标量（比如将0%设置为100%）。此外，如果要更改的属性不是标量，但会影响其他属性的呈现。。它们将跳过过渡效果（aka
display:none
被设置为
display:block
）

注意：与使用Javascript更改元素的内联样式不同，我们将更改这些元素的
class
；也就是说，以下样式表示视觉状态，我们将在它们之间切换

同样，
转换
样式声明（或者更确切地说，图形设备）将处理这两种状态之间帧的增量渲染


更改4个样式属性的代码示例（明确）

var str='hide'；
var btn=document.querySelector（“按钮切换器”）.addEventListener（“单击”，函数（ev）
{
var elms=document.querySelectorAll（'div.block'）；
对于（变量i=0，lng=elms.length；i
.block{
显示：块；位置：绝对；
排名：0；
左：0；右：80%；
底部：0；
背景色：rgba（0,0,0）；
边框：0.1米纯黑色；
最小宽度：5em；
过渡：左2s，不透明度2s，右2s，背景色1s；
}
.包装纸
{
显示：块；位置：相对；背景色：白烟；
最小高度：10em；
宽度：自动；
}
.显示{不透明度：1；左：0%；右：80%；背景色：rgb（255,0,0）；}
.hide{不透明度：0；左：80%；右：0%；背景色：rgb（0,0255）；}
切换块
你能发布你要找的东西的图片，或者至少是描述吗？我不打算下载这个播放器，只是为了回答你的问题雅各布：它不是一个软件。我无法拍摄过渡的照片。在spotify上：单击“Rechercher”时，右侧会显示一个过渡。就像它隐藏在左边一样。所以，搜索框和其他所有东西都从右边滑入？从左边滑入。从左边的菜单中，谢谢你的帮助。但我从不使用JQuery。我把糖果放在哪里了？在？黑色背景上的黑色文本？@BrettCaswell这是JQuery的一个例子，不是CSS样式：）@BrettCaswell好的，我是指样式，不是过渡，我不会花5分钟来制作一个漂亮的配色方案，当OP不关心配色方案的工作时，谢谢。不是很喜欢这个网站，但它的工作：）谢谢！