CODEWITHSUNDEEP
jquerycsscss-transitionshidden
Ben Thompson
Ben Thompson

Reputation: 263

CSS transition on hidden div

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>

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

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.

Upvotes: 1

Views: 11141

Answers (2)

Mark
Mark

Reputation: 3272

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

or:

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

To animate the opacity.

UPDATE

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

Upvotes: 1

FalcoB
FalcoB

Reputation: 1333

Try this code, it should work :)

you did use the height for transition, not the opacity 

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

                });

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

Upvotes: 0

Related Questions