隐藏div上的CSS过渡

问题描述

我有一个在jQuery click函数上显示和隐藏的div，我想在div上添加css过渡.这是通过添加和删除类.hidden和.visible来完成的，这是jquery代码:

I have a div that displays and hides on a jquery click function and I want to add css transition on the div. This is done by adding and a remove a class .hidden and .visible, here is the jquery code:

    <script type="text/javascript">

            $(document).ready(function(){

                $("#search-icon").on( "click", function() {

                if ($("#display-search").hasClass("hidden")) {
                    $("#display-search").removeClass("hidden").addClass("visible");
                }
                 else {
                    $("#display-search").removeClass("visible").addClass("hidden");
                }

                });

            });
    </script>

和.hidden .visible的css:

and the css for .hidden .visible:

.hidden {
  opacity: 0;
  -webkit-transition:  height 0.5s ease;
  -moz-transition: height 0.5s ease;
  -ms-transition: height 0.5s ease;
  -o-transition: height 0.5s ease;
  transition: height 0.5s ease;
  transition-delay:0.2s;}

.visible {
  opacity: 1;
  -webkit-transition:  height 0.5s ease;
  -moz-transition: height 0.5s ease;
  -ms-transition: height 0.5s ease;
  -o-transition: height 0.5s ease;
  transition: height 0.5s ease;
  transition-delay:0.2s;}

有人对我如何获得工作过渡以及我做错了什么有任何想法吗?我是否需要在课程中添加高度/最大高度?我还尝试将过渡添加到div#display-search中，但这也没有任何效果.

Does anyone have any ideas for how I can get the transition to work and what I am doing wrong? Do I need to add a height/max-height to the classes? I also tried adding the transition to the div #display-search but that also had no effect.

推荐答案

-webkit-transition:  height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
transition: height 0.5s ease;

由于您在过渡中指定了高度，因此只有该高度可以设置动画.更改为:

Because you specify height in the transition, only the height will animate. Change it to:

-webkit-transition:  opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;

或:

-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;

为不透明度设置动画.

更新

提琴: http://jsfiddle.net/uq76jtov/

$(document).ready(function () {

    $("#search-icon").on("click", function () {

        if ($("#display-search").hasClass("visible")) {
            $("#display-search").removeClass("visible");
        } else {
            $("#display-search").addClass("visible");
        }

    });

});

#display-search {
    visibility:hidden;
    height:0px;
    background:red;
    overflow:hidden;
    transition:0.5s;
    -webkit-transition:0.5s;
}
#display-search.visible {
    visibility:visible;
    height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="search-icon">Search</span>

<div id="display-search"></div>

这篇关于隐藏div上的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！