Ellipsis represents a binary state of either "on" or "off", with no intermediary values as far as I know. Thus, directly transitioning this property seems unfeasible.
However, I've opted for a slightly different approach by animating the height or max-height of the div instead. You can view working demonstrations below:
Example using max-height (credit to Jake's response in this thread):
In this demo, I've utilized max-height for automatic processing, ensuring responsiveness.
Demo involving both height and max-height, explicitly defined in CSS:
Here, the heights are explicitly set within the stylesheet.
In the latter scenario, you may need to verify if these dimensions suit various screen sizes.
Note that in the initial method reliant on max-height alone, the specified max-height should theoretically never be exceeded at any point or screen size. Given that the max-height is greater than the element's actual height (60px > 45px), there might be a slight transition delay due to the disparity between the two when ellipsis is turned off. If 'popupHeader p' will consistently remain under 45px, feel free to adjust this value. Nevertheless, the negligible transition delay should hardly be perceptible to viewers while providing a safety margin for very compact screens.
Moreover, it's worth mentioning that this solution doesn't necessitate downloading additional libraries beyond your current jQuery setup.
The jQuery code snippet and CSS from the max-height example are available for reference:
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;
/* Only changes are in overflow and transition properties here */
}
.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;
}