При анимации CSS происходит скачок элемента подскажите как исправить?

Рейтинг: 0Ответов: 2Опубликовано: 22.03.2023

Всем привет! Пытаюсь разобраться с CSS и у меня возникла проблема. Мне нужно сделать так, чтобы при наведении на карточку, блок изначально с иконкой (FontAwesome) раскрывался, я сделал это, но у меня он прыгает при движении, как это исправить?

Пример представлен ниже. Помогите пожалуйста разобраться.

.span_info {
  position: absolute;
  right: 0;
  top: 0.5em;
  height: 1.5em;
  z-index: 1001;
}

.box-info {
  display: inline-block;
  line-height: 1;
  height: auto;
}

.information {
  display: inline-block;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: 3s;
  line-height: 1;
}

.information::-webkit-scrollbar {
  width: 0;
}

.card:hover .information {
  display: inline-block;
  max-width: 450px;
  padding-left: 0.3em;
  padding-right: 0.3em;
  transition: 3s;
  overflow: auto;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" integrity="sha512-gMjQeDaELJ0ryCI+FtItusU9MkAifCZcGq789FrzkiM49D8lbDhoaUaIX4ASU187wofMNlgBJ4ckbrXM9sE6Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <title>Hello, world!</title>
</head>

<body>
  <div class="card mt-3 shadow-sm" style="width: 18rem;">
    <div class="position-img-for-card position-relative">
      <span class="pl-2 rounded-left bg-warning span_info">
              <div class="box-info">
                <i class="fas fa-info-circle"></i>
              </div>
              <div class="information">Выезжающая информация</div>
            </span>
      <a href="#">
        <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1870a4786c4%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1870a4786c4%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2299.12312316894531%22%20y%3D%2296.3%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
      </a>

    </div>
    <div class="card-body">
      <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

</body>

</html>

css
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Он у вас схлопывался по ширине, поэтому значёк и дёргался, так как ему деваться некуда было. Нужно делать как я сделал).

.card .span_info {
  position: absolute;
  right: 30px;
  top: 0.5em;
  height: 1.5em;
  z-index: 1001;
  display: flex;
  align-items: center;
  column-gap: 10px;
  padding-right: 0.3em;
  transform: translateX(100%);
  cursor: pointer;
  transition: 0.4s;
}
.card:hover .span_info {
  right: 0;
  transform: translateX(0);
}
.position-img-for-card {
  overflow: hidden;
}
.box-info {
  display: block;
  line-height: 1;
  height: auto;
}

.information {
  display: block;
  white-space: nowrap;
  line-height: 1;
}

.information::-webkit-scrollbar {
  width: 0;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" integrity="sha512-gMjQeDaELJ0ryCI+FtItusU9MkAifCZcGq789FrzkiM49D8lbDhoaUaIX4ASU187wofMNlgBJ4ckbrXM9sE6Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <title>Hello, world!</title>
</head>

<body>
  <div class="card mt-3 shadow-sm" style="width: 18rem;">
    <div class="position-img-for-card position-relative">
      <span class="pl-2 rounded-left bg-warning span_info">
              <div class="box-info">
                <i class="fas fa-info-circle"></i>
              </div>
              <div class="information">Выезжающая информация</div>
            </span>
      <a href="#">
        <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1870a4786c4%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1870a4786c4%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2299.12312316894531%22%20y%3D%2296.3%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
      </a>

    </div>
    <div class="card-body">
      <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

</body>

</html>

▲ 1

.card {
  overflow: hidden;
  position: relative;
}

.span_info {
  position: absolute;
  right: 0;
  top: 0.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  z-index: 1;
  transform: translateX( calc(100% - 30px) );
  transition: transform 0.3s ease;
}

.box-info {
  display: inline-block;
  line-height: 1;
  height: auto;
}

.information {
  display: inline-block;
  max-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
  padding: 0 0.3em;
}

.information::-webkit-scrollbar {
  width: 0;
}

.card:hover .span_info {
  transform: translateX(0);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">

<div class="card mt-3 shadow-sm" style="width: 18rem;">
  <div class="position-img-for-card position-relative">
    <span class="pl-2 rounded-left bg-warning span_info">
              <div class="box-info">
                <i class="fas fa-info-circle"></i>
              </div>
              <div class="information">Выезжающая информация</div>
            </span>
    <a href="#">
      <img class="card-img-top" src="https://picsum.photos/450/450">
    </a>

  </div>
  <div class="card-body">
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>