创建 div 像 Spotify 一样的转换

Question

我想就 CSS 或 JavaScript 中的 div 的过渡提供一些帮助。

我有一个 <div> 和 dispay:none;。使用一些 JS，我更改 display:block 上的显示选项。一切正常。

但是我想知道如何在 <div> 出现在屏幕上时进行转换。想搜索的时候给播放器点赞Spotify

感谢您的帮助。真的很抱歉我的英语不好！

Answer 1

你可以用这样的 JQuery 来完成：

 $(function() {
     var open=false;
     $('.menubar span').click(function(){
         if(open==false){ 
             $('.search').css('left','50px');
             open=true;
         }
         else{
             $('.search').css('left','-100px');
         open=false;
         }
     });
 });

.menu{
    position:fixed;
    left:0;
    top:0;
    width:50px;
    height:100%;
    background:#222021;
z-index:4;
}
.menubar{
    width:50px;
    height:100%;
color:white;
font-family:arial;
}
.search{
    position:absolute;
    left:-100px;
    top:0;
    width:100px;
    background:lightgrey;
height:100%;   
        -o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s  ;
}
.search input{
margin:0;
width:75px;
border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
  <div class="menubar">
    <span>Home</span>
  </div>

</div>  <div class="search"><input type="search"></div>

点击菜单栏中的"Menu"，搜索栏滑出，再次点击隐藏。要使用 JQuery，您必须包含 jquery 库：
将其包含在 <head> 中：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

或从以下网址下载：http://jquery.com/download/
然后，像普通 JS 一样在 <script> 标签中使用脚本。
编辑：
对于下面评论中的问题，#navbar 有一个静态位置，这意味着 z-index 将不适用：

#nav-bar {
    background-color: #23232C;
    bottom: 0px;
    left: 0px;
    top: 0px;
    width: 220px;
    height: 100%;
    margin-top: -17px;
    z-index: 99;
    position: absolute;
}

Answer 2

以下答案使用 CSS 样式声明来完成过渡效果。

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

注意：我们不会使用 Javascript 更改元素的内联样式，而是更改这些元素的 class；意思是，以下样式代表视觉状态，我们将在它们之间切换..

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

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

var str = 'hide';

var btn = document.querySelector("button#toggler").addEventListener('click', function(ev)
  {
     var elms = document.querySelectorAll('div.block');
     for (var i = 0, lng = elms.length; i < lng; i++)
     {
       elms[i].className = elms[i].className.replace("hide", "").replace("show", "").replace(" ", "");
       elms[i].className = elms[i].className + ' ' + str;
     }
     str = (str === 'show') ? str = 'hide' : 'show';
  });

.block {
  display:block; position:absolute;
  top:0;
  left:0;right:80%;
  bottom:0;
  background-color: rgba(0,0,0);  
  border:0.1em solid black;
  min-width:5em;
  transition: left 2s, opacity 2s, right 2s, background-color 1s;
}

.wrapper 
{
  display:block;position:relative;background-color:whitesmoke;
  min-height:10em;
  width:auto;
  }


.show {opacity:1;left:0%;right:80%;background-color:rgb(255,0,0);}
.hide {opacity:0;left:80%;right:0%;background-color:rgb(0,0,255);}

<button id="toggler">Toggle Block</button>
<div class="wrapper">
  <div class="block"></div>
</div>

下面是一个相当复杂的滑块，它最终使用相同的原理来呈现过渡。

$("div.slide > button.show" ).on('click', function (ev)
  {
    var slide = $(ev.target).closest(".slide");
    slide.toggleClass("hide").toggleClass("show");    
    
    var slidePrev = slide.prev();
  
    slidePrev.toggleClass("hide").toggleClass("show");
    
    slidePrev = slidePrev.prev();
    
    slidePrev.toggleClass("hide").toggleClass("show");
  
    slidePrev = slidePrev.prev();
    
    slidePrev.toggleClass("hide").toggleClass("show");
  
    slidePrev = slidePrev.prev();
    
    slidePrev.toggleClass("hide").toggleClass("show");
  })

$("div.slide > button.hide" ).on('click', function (ev)
  {
   
    var slide = $(ev.target).closest(".slide");
    slide.toggleClass("hide").toggleClass("show");
  
    var slideNext = slide.next();
  
    slideNext.toggleClass("hide").toggleClass("show");
    
    slideNext = slideNext.next();
    
    slideNext.toggleClass("hide").toggleClass("show");
  
    slideNext = slideNext.next();
    
    slideNext.toggleClass("hide").toggleClass("show");
  
    slideNext = slideNext.next();
    
    slidePrev.toggleClass("hide").toggleClass("show");
  
  })

html, body {display:block;position:relative;margin:0 auto;padding:0;height:100%}

div.wrapper {position:relative;
  left:0;right:0;top:0;bottom:0;
  width:auto;
  background-color:whitesmoke;
  display:block;
  overflow:hidden;  height:100%;
  }

button {line-height:2em;padding:0.2em;display:block;}



div.slide {
  display:block;
  position:absolute;
  border:0.2em solid black;
  background-color:white;
  top:0;
  bottom:0;
  right:0;
  left:0;
  opacity:1;
  transition: left 1s, opacity 0.5s;
  }

div.slide:nth-child(1) {
  left: 1em;
  z-index: 1;
  }

div.slide:nth-child(2) {
  left: 3.5em;
  z-index: 2;
  }

div.slide:nth-child(3) {
  left: 6em;
  z-index: 3;
  }

div.slide:nth-child(4){
  left: 8.5em;
  z-index: 4;
  }

div.slide.hide {
  opacity:0.3;
  left: 59%;  
}

div.slide.show {  
  opacity:1;
  }

div.show > button.show {display:none;}
div.hide > button.hide {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
<div class="slide show">
  
  <button class="show">show</button>
  <button class="hide">hide</button>
</div>

<div class="slide show">
  
  <button class="show">show</button>
  <button class="hide">hide</button>
</div>

<div class="slide show">
  
  <button class="show">show</button>
  <button class="hide">hide</button>
</div>

<div class="slide show">
  
  <button class="show">show</button>
  <button class="hide">hide</button>
</div>
</div>

创建 div 像 Spotify 一样的转换

Create div transition like Spotify

javascript

jquery

html

css

transition

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