Неожиданный провал при запуске ключевого кадра - PullRequest
Новая
       56

Неожиданный провал при запуске ключевого кадра

1 голос
/ 03 ноября 2019

У меня есть фрагмент, который отображает текст каждые 7 секунд. Однако в начале каждой анимации происходит неожиданное падение, которое я не могу исключить. Можете ли вы найти, что это такое?

Вот ручка. 

.chillquote {
  font-size: 1.5em;
  line-height: 1.5em;
  text-align: center;
  padding: 1em;
  color: var(--bodyColor);
  height: 4em;
  font-family: var(--usedH-font-stack);
}
  div {
    display: inline-block;
    overflow: hidden;
  }

  div:first-of-type {
    /* For increasing performance 
                         ID/Class should've been used. 
                         For a small demo 
                         it's okaish for now */
    animation: showup 7s infinite;
  }

  div:last-of-type {
    width: 0px;
    animation: reveal 7s infinite;
  }

  div:last-of-type span {
    margin-left: -50rem;
    animation: slidein 7s infinite;
  }

  @keyframes showup {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes slidein {
    0% {
      margin-left: -800px;
    }
    20% {
      margin-left: -800px;
    }
    35% {
      margin-left: 0px;
    }
    100% {
      margin-left: 0px;
    }
  }

  @keyframes reveal {
    0% {
      opacity: 0;
      width: 0px;
    }
    20% {
      opacity: 1;
      width: 0px;
    }
    30% {
      width: auto;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      width: auto;
    }
  }
<div class="chillquote">
  <div>
   Q
  </div>
  <div>
    <span >
                              {{ randomQ.quote }}
                              <i><span style="    font-size: 0.5em;">~ {{ randomQ.author }}</span></i>
    </span>
  </div>

</div>

1 Ответ

1 голос
/ 03 ноября 2019

Это потому, что вы используете inline-block для отображения всех divs.

Когда появляется текст, который начинается, у вас есть width 0, установленный в анимации reveal - когда он начинает появляться, вы переходите от 0 к auto.

Поскольку текст цитаты начинается с нескольких строк, базовая линия меняется, поэтому Q «опускается» до базовой линии текста.

Я обновил ваше перо для создания блока отображения .chillquote и добавил классы к другим элементам div - потому что last-child и first-child также влияли на элемент .chillquote, потому что вы никогда не указывали дочерний элементelement.

Я также устанавливаю конечную ширину в процентах. 

.chillquote {
  font-size: 1.5em;
  line-height: 1.5em;
  text-align: left;
  padding: 1em;
  color: var(--bodyColor);
  height: 4em;
  font-family: var(--usedH-font-stack);
}

.chillquote div {
  display: inline-block;
  overflow: hidden;
}

div.first {
  /* For increasing performance 
                         ID/Class should've been used. 
                         For a small demo 
                         it's okaish for now */
  animation: showup 7s infinite;
}

div.second {
  width: 0px;
  animation: reveal 7s infinite;
}

div.second span {
  margin-left: -50rem;
  animation: slidein 7s infinite;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 80%;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 80%;
  }
}
<div class="chillquote">
  <div class="first">
    Q
  </div>
  <div class="second">
    <span>Here is the quote<i> <span style="font-size: 0.5em;">~ Author</span></i>
    </span>
  </div>
</div>

https://codepen.io/chrislafrombois/pen/zYYpVQz

РЕДАКТИРОВАТЬ

Для центрированного текста мы можем использовать display: flexи анимируйте свойство flex-basis до max-content. 

.chillquote {
  font-size: 1.5em;
  line-height: 1.5em;
  padding: 1em;
  color: var(--bodyColor);
  height: 4em;
  font-family: var(--usedH-font-stack);
  display: flex;
  justify-content: center;
}

div.first {
  animation: showup 7s infinite;
  text-align: right;
}

div.second {
  width: 0px;
  animation: reveal 7s infinite;
  text-align: left;
  overflow: hidden;
}

div.second span.quote {
  animation: slidein 7s infinite;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -100vw;
  }
  20% {
    margin-left: -100vw;
  }
  35% {
    margin-left: 0;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    flex-basis: 0;
  }
  20% {
    opacity: 1;
    flex-basis: 0;
  }
  30% {
    flex-basis: max-content;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    flex-basis: max-content;
  }
}
<div class="chillquote">
  <div class="first">
    Q
  </div>
  <div class="second">
    <span class="quote">Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.<i> <span style="font-size: 0.5em;">~ {{ randomQ.author }}</span></i>
    </span>
  </div>
</div>

Новый CodePen: https://codepen.io/chrislafrombois/pen/zYYRzOY

...