Make slideDown() на заголовке при удалении класса переполнения
У меня есть всплывающее окно, которое отображается при просмотре. Как я сделал заголовок со следующим css:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
который я добавляю/удаляю на основе щелчка, используя jQuery.
Но когда класс ellipsis удален, заголовок просто" POPS" отображается.
Итак, мой вопрос: Можно ли облегчить переход от скрытого к не с jquery или css?
Пример кода того, что происходит здесь: https://jsfiddle.net/dzm50k39/4/
Ответы
Ответ 1
Проверьте это
$(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>
Ответ 2
Поместите removeClass и addClass в slideUp и slideDown обратный вызов успеха. Проверьте приведенный ниже фрагмент.
$(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,function(){
$('.popupHeader p').removeClass("ellipsis");
});
}
else {
$(".popupContent").slideUp(600,function(){
$('.popupHeader p').addClass("ellipsis");
});
}
});
});
.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>
<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>
Ответ 3
Я создал фрагмент для вас. Я использовал небольшой эффект jquery. Надеюсь, это поможет вам.
$(function(){
$('.affix-button').on('click', function(){
$(this).parents('.knowledgebase-affix').toggleClass('close-appix');
});
$('.close-me').on('click', function(){
$(this).parents('.knowledgebase-affix').removeClass('close-appix');
});
});
.knowledgebase-affix {
background-color: #ffffff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
display: block;
padding: 25px;
position: fixed;
right: 30px;
bottom: 0;
transform: translateY(100%);
transition: top 0.3s ease-in-out 0s, transform 0.3s ease-in-out 0s;
width: 242px;
z-index: 1030;
}
.knowledgebase-affix .affix-button {
background-color: #57c7d4;
border: none;
border-radius: 3px 3px 0 0;
bottom: 100%;
color: #ffffff;
font-size: 16px;
height: 30px;
padding: 0;
position: absolute;
right: 0;
width: 30px;
}
.knowledgebase-affix.close-appix {
transform: translateY(0);
}
.knowledgebase-affix .nav li {
padding-left: 11px;
position: relative;
}
.knowledgebase-affix .nav li a {
color: #5b5b5b;
display: inline-block;
font-size: 13px;
line-height: 16px;
padding: 0;
transition: color 0.3s ease-in-out 0s;
}
.knowledgebase-affix .nav li a:before {
background-color: #5b5b5b;
border-radius: 50%;
content: '';
height: 4px;
left: 0;
position: absolute;
top: 9px;
transition: background-color 0.3s ease-in-out 0s;
width: 4px;
}
.knowledgebase-affix .nav li a:hover, .knowledgebase-affix .nav li a:focus {
color: #9272cd;
}
.knowledgebase-affix .nav li a:hover:before, .knowledgebase-affix .nav li a:focus:before {
background-color: #9272cd;
}
.knowledgebase-affix .nav li a + .nav {
display: none;
}
.knowledgebase-affix .nav li a.active {
color: #9272cd;
}
.knowledgebase-affix .nav li a.active:before {
background-color: #9272cd;
}
.knowledgebase-affix .nav li a.active + .nav {
display: flex;
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sps sps--abv knowledgebase-affix" id="knowledgebase-affix">
<button class="affix-button" type="button" role="button"><i class="fa fa-caret-down" aria-hidden="true"></i></button>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#codephrases-example" class="nav-link active">Code phrases</a>
</li>
<li class="nav-item">
<a href="#infobox-example" class="nav-link">Info box example</a>
</li>
<li class="nav-item">
<a href="#typography-example" class="nav-link">Typography</a>
</li>
<li class="nav-item">
<a href="#accordions-example" class="nav-link">Accordions</a>
</li>
<li class="nav-item">
<a href="#tab-example" class="nav-link">Tabs</a>
</li>
<li class="nav-item">
<a href="#icon-example" class="nav-link">Icons</a>
</li>
<li class="nav-item">
<a href="#bullets-number-example" class="nav-link">Bullets & numbers</a>
</li>
<li class="nav-item">
<a href="#table-example" class="nav-link">Table</a>
</li>
</ul>
<button role="button" type="button" class="close-me">Close</button>
</div>
<!-- Slider bar Affix end -->
Ответ 4
Как многоточие является состоянием "on" или "off" без каких-либо значений между ними (я считаю, по крайней мере), я не думаю, что можно сделать переход по этому свойству напрямую.
Я немного изменил подход, переместив либо высоту или максимальную высоту div. Здесь вы можете увидеть рабочую скрипку:
Fiddle с использованием max-height (cudos для ответа от Jake в этот вопрос):
В этой скрипке я использовал max-height, чтобы сделать процесс автоматическим; что означает, что он более или менее отзывчивый.
Скрипт с использованием высоты и максимальной высоты, явно заданный в css:
В этой скрипте высота явно задана в css.
В последнем решении вам может потребоваться проверить, применяются ли эти высоты для разных размеров экрана.
Обратите внимание, что в первом решении (чисто основанном на max-height) max-height устанавливается на значение, которое, я считаю, не будет отображаться в любое время/размер экрана. Поскольку максимальная высота выше фактического элемента (60px > 45px), существует небольшая задержка перехода от разницы максимальной высоты (60 пикселей) и фактической высоты (45 пикселей) при выключении многоточия. Если popupHeader p никогда не будет выдавать 45px, вы можете это изменить. Однако переходная задержка практически не существует для зрителя и дает вам запас прочности в случае очень маленьких экранов.
Кроме того, обратите внимание, что это решение не потребует загрузки дополнительной библиотеки, отличной от существующей jQuery.
JQuery и css из примера максимальной высоты можно увидеть здесь:
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;
}
