As ellipsis is a state of "on" or "off" with no values in between(I believe, at least), I dont think it's possible to make a transition on this property directly.
I've taken a slightly different approach, transitioning either the height- or the max-height of the div instead. You can see working fiddle's here:
Fiddle using max-height (cudos to answer from Jake in this question):
In this fiddle I've used max-height to make the process automatic; meaning that it's more or less responsive enabled.
Fiddle using height and max-height, explicitly set in css:
In this fiddle the height is explicitly set in the css.
In the last solution you might have to check if these height's apply for every different screen size.
Please note that in the first solution (purely based on max-height) the max-height is set to a value which I believe that it won't exeed at any time/screen size. Since the max-height is higher than the actual element (60px > 45px) there is a slight transition delay from difference of the max-height (60px) and the actual height (45px) when ellipsis is off. If the popupHeader p won't ever exeed the 45px you can change this. However, the transitioning delay is practically non-existing to the viewer and gives you a security margin in case of very small screens.
Further, also please note that this solution won't require you to download extra library's other than your existing jQuery.
The jQuery and the css from the max-height example can be seen here:
jQuery:
$(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)
{
popupHeaderHeight = $('.popupHeader p').height();
$(".popupContent").slideDown(600);
$('.popupHeader p').css('max-height', popupHeaderHeight ).removeClass("ellipsis").css('max-height', '60px');
}
else {
$(".popupContent").slideUp(600);
$('.popupHeader p').css('max-height', popupHeaderHeight);
setTimeout(function(){$('.popupHeader p').addClass("ellipsis");},500);
}
});
});
CSS:
.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;
overflow:hidden;
transition:all 0.6s;
/* The only differences is the overflow and transition */
}
.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;
}
