Bootstrap 4 Accordion - движение не плавное - PullRequest
Новая
       14

Bootstrap 4 Accordion - движение не плавное

0 голосов
/ 11 марта 2019

Я понял, что аккордеон использует Bootstrap 4 Свернуть компонент .

Когда я нажимаю на элементы заголовка, он открывает слайд, но движение немного застревает.

Я бы хотел сделать его более плавным, чего мне не хватает?

Здесь вы можете найти JSFiddle , который показывает поведение:

HTML 

<body >        
    <div class="accordion">
        <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
            <div class="icon"></div>
            Title First Slide
        </div>
        <div class="accordion-body collapse" id="collapse_1" style="">
            This is the first slide. 
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-header" data-toggle="collapse" data-target="#collapse_2">
            <div class="icon"></div>
            Title Second Slide
        </div>
        <div class="accordion-body collapse" id="collapse_2">
            This is the second slide. 
        </div>
    </div>
</body>

CSS 

.accordion .accordion-header {
  position: relative;
  padding: 1rem;
  font-size: 18px;
  font-weight: bold;
}

.accordion .accordion-header .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 40px;
  width: 40px;
  text-indent: 0 !important;
  overflow: visible !important;
}

.accordion .accordion-header .icon:after {
  /*background: #fff;*/
  border: 2px solid #f08e0d;
  border-radius: 100%;
  box-sizing: border-box;
  color: #f08e0d;
  content: "+" !important;
  text-align: center;
  font-size: 27px;
  font-weight: 400;
  opacity: 1;
  padding: 0px 10px;
}

.accordion .accordion-header[aria-expanded=true] .icon:after {
  content: "-" !important;
  padding: 0px 13px;
}

.accordion .accordion-body {
  padding: 1rem;
}

1 Ответ

2 голосов
/ 11 марта 2019

Испытывая ваш код, кажется, что заполнение, которое вы добавляете к .accordion-body, немного влияет на анимацию, просто удаляя последнее правило, которое аккордеон открывает и закрывает плавно 

.accordion .accordion-header {
  position: relative;
  padding: 1rem;
  font-size: 18px;
  font-weight: bold;
}

.accordion .accordion-header .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 40px;
  width: 40px;
  text-indent: 0 !important;
  overflow: visible !important;
}

.accordion .accordion-header .icon:after {
  /*background: #fff;*/
  border: 2px solid #f08e0d;
  border-radius: 100%;
  box-sizing: border-box;
  color: #f08e0d;
  content: "+" !important;
  text-align: center;
  font-size: 27px;
  font-weight: 400;
  opacity: 1;
  padding: 0px 10px;
}

.accordion .accordion-header[aria-expanded=true] .icon:after {
  content: "-" !important;
  padding: 0px 13px;
}

.accordion .acc-content {
  padding: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="accordion">
    <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
      <div class="icon"></div>
      Title First Slide
    </div>
    <div class="accordion-body collapse" id="collapse_1" style="">
      <div class="acc-content">
        This is the first slide.
      </div>

    </div>
  </div>
  <div class="accordion">
    <div class="accordion-header" data-toggle="collapse" data-target="#collapse_2">
      <div class="icon"></div>
      Title Second Slide
    </div>
    <div class="accordion-body collapse acc-content" id="collapse_2">
      This is the second slide.
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...