1

$(function(){
  $(".buttonupdown").click(function(){ 
      $(".droplist").toggleClass('active')
      $(".buttonicon").toggleClass('active')  
    });
  });
.droplist {
        
        width: 200px;
        height: 200px;
        box-shadow: 0 0 40px 0 rgba(0,0,0,0.05), 0 80px 70px -70px rgba(0,0,0,0.2);
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        background: #ffffff;
        padding: 30px 15px 50px 15px;
        transition: all 0.3s;
    }
    
    .buttonupdown {
        
        width: 100%;
        height: 30px;
        background: #f0f0f0;
        border-radius: 0px 0px 5px 5px;
        margin-bottom: 0 auto;
        position:absolute;
        bottom:0;
        right:0;
        
        
    }
    
    
    .droplist.active {
        

        height: 100%;
        transition: all 0.3s;

        
        
    }
    
    .buttonupdown:hover {
        
        cursor: pointer;
        
    }
        
    
    .buttonicon {
        
        width: 15px;
        height: 15px;
        margin: 0 auto;
        opacity: 0.1;
        transition: all 0.3s;
    }
    
    
    .buttonupdown:hover .buttonicon {
        
        opacity: 0.9;
        transition: all 0.3s;
        
    }
    
    
    .buttonicon.active {
        
        transform: rotate(180deg);
        transition: all 0.3s;
    }
    
    .fogunderbutton {
        
        width: 100%;
        height: 50px;
        position:absolute;
        bottom:0;
        right:0;
        margin-bottom: 30px;
        background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
    }
<div class="droplist">

    
    <ul style="font-size: 14px; line-height: 16px; margin-left: 0px;">
    
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
    <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
    <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
        <li>текст</li>
    </ul>
    
    
    <div class="fogunderbutton"></div>
<div class="buttonupdown">
    <div style="height: 7.5px;"></div>
    <div class="buttonicon">
    
    
        <svg color="#787878" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
    <g>
        <path d="M509.121,125.966c-3.838-3.838-10.055-3.838-13.893,0L256.005,365.194L16.771,125.966c-3.838-3.838-10.055-3.838-13.893,0    c-3.838,3.838-3.838,10.055,0,13.893l246.18,246.175c1.842,1.842,4.337,2.878,6.947,2.878c2.61,0,5.104-1.036,6.946-2.878    l246.17-246.175C512.959,136.021,512.959,129.804,509.121,125.966z"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    
    
    </div>
    
    </div>
    
    
</div>

4
  • а где, собственно, сам скрипт который нужно подправить? И как мне кажется тебе просто нужно добавить transition к действию 29 июн 2020 в 12:58
  • Я не очень специалист в этом) код вставлял, но он почему то показывается с ошибкой transition не работает почемуто $(function(){ $(".buttonupdown").click(function(){ $(".droplist").toggleClass('active') $(".buttonicon").toggleClass('active') }); }); 29 июн 2020 в 13:29
  • добавь этот код в вопрос что бы люди могли видеть как что работает 29 июн 2020 в 14:14
  • height 100% не анимируется, используйте max-heght
    – soledar10
    30 июн 2020 в 5:16

2 ответа 2

2

Пример

$(function() {
  $(".buttonupdown").click(function() {
    $(".droplist").toggleClass('active')
    $(".buttonicon").toggleClass('active')
  });
});
.droplist {
  width: 200px;
  max-height: 200px;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05), 0 80px 70px -70px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: 30px 15px 50px 15px;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.buttonupdown {
  width: 100%;
  height: 30px;
  background: #f0f0f0;
  border-radius: 0px 0px 5px 5px;
  margin-bottom: 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
}

.droplist.active {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}

.buttonupdown:hover {
  cursor: pointer;
}

.buttonicon {
  width: 15px;
  height: 15px;
  margin: 0 auto;
  opacity: 0.1;
  transition: all 0.3s;
}

.buttonupdown:hover .buttonicon {
  opacity: 0.9;
  transition: all 0.3s;
}

.buttonicon.active {
  transform: rotate(180deg);
  transition: all 0.3s;
}

.fogunderbutton {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 30px;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="droplist">


  <ul style="font-size: 14px; line-height: 16px; margin-left: 0px;">

    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
  </ul>


  <div class="fogunderbutton"></div>
  <div class="buttonupdown">
    <div style="height: 7.5px;"></div>
    <div class="buttonicon">


      <svg color="#787878" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
    <g>
        <path d="M509.121,125.966c-3.838-3.838-10.055-3.838-13.893,0L256.005,365.194L16.771,125.966c-3.838-3.838-10.055-3.838-13.893,0    c-3.838,3.838-3.838,10.055,0,13.893l246.18,246.175c1.842,1.842,4.337,2.878,6.947,2.878c2.61,0,5.104-1.036,6.946-2.878    l246.17-246.175C512.959,136.021,512.959,129.804,509.121,125.966z"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>


    </div>

  </div>


</div>

0

Я бы сделал так:

 $(function(){
  $(".buttonupdown").click(function(){ 
      $(".droplist").slideToggle();
      $(".buttonicon").toggleClass('active'); 
    });
  });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.