Подтвердить что ты не робот

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/

4b9b3361

ОТВЕТЫ

Ответ 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;
}