Question

我有一个显示和隐藏jquery点击功能的div，我想在div上添加css过渡。这是通过添加和删除类.hidden和.visible来完成的，这里是jquery代码：

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

.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但是也没有效果。

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

因为您在过渡中指定了高度，所以只有高度会设置动画。将其更改为：

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

Answer 2

试试这段代码，它应该可以工作:)

你确实使用过渡高度，而不是不透明度

＆＃13;

$(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");
                }

                });

            });

＆＃13;

.hidden {
  opacity: 0;
  -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;
  transition-delay:0.2s;}

.visible {
  opacity: 1;
  -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;
  transition-delay:0.2s;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<button id="search-icon">click me!</button>
<div id="display-search" class="visible">heyho</div>

＆＃13;

隐藏div上的CSS转换

2 个答案: