Question

我用简单的查询隐藏了一个div。我想在隐藏div时添加效果。

这是我的代码

<script type="text/javascript">
      function divcustumfldshow() {
    var dive = document.getElementById("divcustumfld");
    dive.style.display = (dive.style.display == "none") ? "block" : "none";
    }
<script>

Answer 1

我在标签中看到了CSS3，所以这里有一个纯CSS3示例：

.block {
    transition: opacity 0.5s linear, transform 0.5s linear;
    opacity: 1;
}

.block.hidden {
    opacity: 0;
    transform: scaleY(0);
}

这里是小提琴：http://jsfiddle.net/andunai/1e21endf/

然而，在这种情况下，元素会在视觉上消失，并且不会释放它所占据的位置，因此您必须最终使这个元素具有position: absolute或animage padding，margin和max-height也是如此 - 请注意height的转换仍有问题：How can I transition height: 0; to height: auto; using CSS?

.block {
    transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear;
    opacity: 1;
    max-height: 30px; /* This one must be approximately of the
                         height of element, not less */
}

.block.hidden {
    opacity: 0;
    max-height: 0;
    padding: 0;
    transform: scaleY(0);
}

以下是添加几乎真实缩放的示例：http://jsfiddle.net/andunai/1e21endf/1/

Answer 2

如果您希望纯CSS3解决方案淡出然后立即隐藏，您可以通过将max-height设置为0来模拟隐藏元素。您还需要在元素设置overflow:hidden时被隐藏以确保最大高度不受内容的影响。

当您为max-height设置动画时，您会将其延迟淡出时间并将动画时间设置为0以确保在淡出完成时立即发生，反之亦然：

＆＃13;

function divcustumfldshow() {
    var dive = document.getElementById("divcustumfld");
    // toggle the class name - this will need to be more inteligent if it has multiple classes
    dive.className = dive.className ? '' : 'hidden';
}

＆＃13;

#divcustumfld {
    transition: opacity 2s linear, max-height 0s linear 0s;
    opacity: 1;
    background: red;
    max-height:100%;
}

#divcustumfld.hidden {
    opacity: 0;
    transition: opacity 2s linear, max-height 0s linear 2s;
    max-height: 0;
    overflow:hidden;
}

＆＃13;

<button onclick="divcustumfldshow()">Click</button>
<div id="divcustumfld">Foo<br/>Bar</div>
<div>Blah blah</div>

＆＃13;

Answer 3

不推荐但是为了实现以下输出，你可以制作一个间隔，并可以改变每个间隔的不透明度。我建议你使用css3或jquery来实现效果

＆＃13;

 var count= 1;
     i = setInterval(function(){
     divcustumfldshow(count)
  if(count==10)
   clearInterval(i);
else   
  count++;
      },200); 

     function divcustumfldshow(count1) {
        var dive = document.getElementById("divcustumfld");
        if(count1==10)
        {dive.style.display =  "none";}
       else {
         console.log(dive.style.opacity)
       dive.style.opacity = (10-count1)/10;
        }
        }

＆＃13;

#divcustumfld{width:200px;
height:200px;
background:red;
opacity:1;
}

＆＃13;

<div id="divcustumfld">
  
  
  </div>

＆＃13;

Answer 4

演示 - http://jsfiddle.net/thjzgv93/

您可以使用css3 opacity隐藏元素

#divcustumfld {
    opacity:1;
    transition: .5s linear;
}
#divcustumfld.hide {
    opacity:0;
}

或者您可以使用translate

演示 - http://jsfiddle.net/thjzgv93/1/

#divcustumfld {
    transition: .5s linear;
}
#divcustumfld.hide {
    transform:translatey(-100%)
}

Answer 5

<div id="divcustumfld">
       Your data elements 
</div>

好的

$('#btn1').click(function(){
    $('#divcustumfld').hide();

}）;

http://jsfiddle.net/mynameisvikram/vv0ranzo/

Div Show Hide with Effect

5 个答案: