нарушение пользовательской css анимации для мобильных браузеров

Я хочу использовать упомянутую ниже css-анимацию, но она не работает в мобильных браузерах, потому что я сделал переполнение как скрытое, а пробел - как без переноса как часть анимации.

p{
  color: black; 
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 5s steps(60, end);
  opacity: 0;
}

@keyframes type{
  from { width: 0; opacity:1;} 
  to { opacity:1;}

Это jsfiddle для кода https://jsfiddle.net/ed8nuf76/

Если вы внимательно посмотрите, полное предложение не отображается в мобильных браузерах и даже в Fiddle, после того как ширина текста достигает 100%, он обрезает текст, а не переполняет его до второй строки.

Есть ли способ решить эту проблему?


javascript html css css-animations
person Aman Jagga    schedule 04.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вам нужно решение, не использующее javascript, вы можете использовать метод чистого CSS ниже, но для его работы вам нужно знать, сколько строк занимает ваш контент (потому что только CSS не будет может получить это вычислительным путем).

Как вы можете видеть в приведенном ниже примере, если вы знаете, что ваш контент занимает 3 строки, и вы также знаете, что каждая строка имеет line-height 24px, вы можете указать анимации, что содержащий div должен быть 24px высотой в начале, 48px высотой 1 секунду спустя, 72px высокий, еще секунду спустя и, наконец, 96px высокий.

Затем вы можете скрыть самую нижнюю видимую строку текста в div непрозрачным псевдоэлементом ::after и дать псевдоэлементу 1 секунду animation, который повторяется три раза, при этом каждый раз ширина псевдоэлемента уменьшается с 300px до 0, показывая текст внизу.

Рабочий пример:

p {
margin-left: 6px;
font-size: 16px;
line-height: 24px;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
animation: type 3s;
}

div {
position: relative;
width: 300px;
height: 96px;
padding: 0 6px;
overflow: hidden;
animation: growTaller 3s step-end;
}

div p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
white-space: normal;
overflow-x: hidden;
overflow-y: visible;
animation: none;
}

div::after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
z-index: 6;
width: 312px;
height: 24px;
background-color: rgb(255,255,255);
animation: typeFaster 1s linear 3;
}

@keyframes type {
from {width: 0;} 
to {width: 100%;} 
}

@keyframes typeFaster {
from {width: 312px;} 
to {width: 0;} 
}

@keyframes growTaller {
0%   {height: 24px;}
33.33%  {height: 48px;}
66.66%  {height: 72px;}
100%  {height: 96px;}
}
<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking.</p>

<div>
<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking. Using this method, it works!</p>
</div>

person Rounin    schedule 04.12.2016
comment
идеально!! использование CSS - person Aman Jagga; 05.12.2016

arrow_upward
1
arrow_downward

Проблема не в самом мобильном браузере, а просто в подключении к нему, из-за простой вещи: пробела width.

В вашем примере ширина текстового контейнера будет определяться длиной используемого текста, что означает, что даже если вы установите width на 100%, вы по-прежнему ограничены общей шириной устройства браузера. Кроме того, CSS3 не знает только, как управлять логикой, чтобы разорвать черту.

Лучшее решение: перейдите на JavaScript и позвольте ему обрабатывать эту логику.

У нас есть несколько хороших вариантов, которые позволяют легко и эффективно справиться с этим:

person bosco    schedule 04.12.2016