怎么给block里面的图片也能加上缓动效果

yakczh · 发表于 2016-6-3 20:48:49

本帖最后由 yakczh 于 2016-6-3 20:50 编辑

<!DOCTYPE html>
<html>
<head>

}
html{

height:100%;
overflow:hidden;
}
    html,body{
height:inherit;
    }
    #wrap{
     
      position:absolute;
      width:100%;
      bottom:0;
      
    }
    li{
list-style:none;
      height:35px;line-height:35px;
padding-left:10px;
      border:0px solid green;
background:orange;
    }
    #block{
         transition:all 1.5s;-webkit-transition:all 1.5s;
      height:0; 
    }
      #block.show{

transition:all 1.5s;-webkit-transition:all 1.5s;
background:yellowgreen;
      height:100%;  
    }
#block.show img {
    transition:all 1.5s;-webkit-transition:all 1.5s;
margin:0 auto;
}
     
  </style>
  
</head>
<body>
  <h1>test </h1>
  
  <div id='wrap' >
  <li id='btn'> click </li>
   <li id='block'> 
 <img src="http://n.sinaimg.cn/default/transform/20160601/lmym-fxsrkwk3401406.jpeg" />
<script type="text/javascript">

document.write(navigator.userAgent)
</script>

</li> 
    
  </div>
  <script>
    
    document.getElementById('btn').addEventListener('click',function(){
     
      var sslide=document.getElementById('block');
      
      if(sslide.offsetHeight > 0 ){
 sslide.className = sslide.className .replace('show', "")

}else {
  sslide.className='show';
  }
      
        
    });
    
      
      
    
  </script>
</body>
</html>

提示：您可以先修改部分代码再运行

现在只是id＝block的背景颜色在缓变，怎么样让里面的图片高度也随着缓变？

帐号		自动登录	找回密码
密码			注册

[讨论] 怎么给block里面的图片也能加上缓动效果