Question

我想在CSS或JavaScript中转换div有一些帮助。

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

但我想知道当<div>出现在屏幕上时如何进行转换。就像玩家Spotify时想要搜索某些内容一样。

谢谢你的帮助。真的很抱歉我的BAD英语！

Answer 1

你可以使用像这样的JQuery：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

点击＆＃34;菜单＆＃34;在菜单栏中，搜索栏滑出，再次单击以隐藏它。要使用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/下载然后，只需在<script>标记中使用普通JS等脚本修改
对于下面评论中的问题，#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>

像Spotify一样创建div转换

2 个答案:

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