make slideDown() on header when overflow class is removed

Question

I have a popup that slides up into view when clicked. The way I've made the header is with the following css:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

which I am adding/removing based on click using jQuery.
But when the ellipsis class is removed, the header just "POPS" into view.

So my question is: Is it possible to ease the transition from hidden to not with jquery or css?

Code example of what happens here: https://jsfiddle.net/dzm50k39/4/

Answer 1

Check this

 $(document).ready(function(){
       
      
 var havePoppedUp = 0;      
 $(window).on('scroll', function() {
   var st = $(this).scrollTop();
   var wh = $(document).height() - $(window).height();
   var perc = (st*100)/wh;
   
   if(perc > 50 && havePoppedUp == 0)
       {
           havePoppedUp = 1;
            $(".popupContent").css("display", "inline");
            $('.popupHeader h7').removeClass("ellipsis");  
           
       }
});


    $(".closepopup").click(function(){
        $(".popupContainer").fadeOut()
    });
      
    $(".closepopupBtn").click(function(){
        $(".popupContainer").hide()
    });


    $(".popupHeader").click(function(){
        if($('.popupContent:visible').length == 0)
            {
            $(".popupContent").slideDown(600);
           $('.popupHeader p').toggleClass( "ellipsis", 600 );
            }
        else {
            
            $(".popupContent").slideUp(600);
            $('.popupHeader p').toggleClass( "ellipsis", 600 );
            
        }    
            
    });        
                
});

.popupContainer {
    padding: 5px 15px 0 15px;
    position: fixed; 
    background-color: #718F97;
    bottom: 0;
    right: 50px;
    max-width: 300px;
    color: white;

}
.popupHeader {
    width: 100%;
    height: auto;
}
.popupHeader p {
    max-width: 85%;
    float: left;
    margin-bottom: 5px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.popupHeader button {
    float: right;
    text-decoration: none;
    border: none;
    background-color: #718F97;
    color: white;
    margin-bottom: 5px;
}

.popupContent {
    display: none; 
}

.popupContent p {
    max-width: 100%;
    clear: both;
}

.popupContent button {
    width: 100%;
    margin-bottom: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="popupContainer">
          <div class="popupHeader clearfix">
            <p class="ellipsis"><b> Lorem ipsum dolar sit amt flip flop and something else</b></p><button class="closepopupBtn"><b>x</b></button>
          </div>
          <div class="popupContent">
                <p>
                    Text to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insert
                </p>
              <button class="button" style="background-color: green; width: 100%;" onclick="location.href='http://google.com';">Yes</button>
              <button  class="closepopup" type="button" style="background-color: orange" href="#">No</button>
          </div>
      </div>