Блог

Главная - Вопросы по программированию - проблема со сквозной анимацией

проблема со сквозной анимацией

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу создать простую сквозную анимацию, и пока я здесь:

 .strikethrough {
    display: inline-block;
    position: relative;
    line-height: 1.5em;
}

.strikethrough:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    box-shadow: 0 1px rgba(252, 3, 3,0.7);
    margin-top: -0.7em;
    background: rgba(252, 3, 3,0.8);
    transform-origin: center left;
    animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;

}

@keyframes strikethrough {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}  
 <span class="strikethrough">Favor packaging over toy</span>

Как вы видите, все работает нормально, кроме двух вещей:

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

  2. Я хочу инициировать анимацию с помощью javascript… но с этим псевдо-элементом (после) это кажется сложным!

Ответ №1:

Вы можете исправить свою анимацию с помощью animation-fill-mode :

 animation-fill-mode: backwards;

Чтобы запустить анимацию, просто добавьте класс зачеркивания. Я думаю, что это не сработает, если у вас есть многострочный текст, поскольку вы ::after не будете его охватывать.

 document.querySelector( '.strikethrough' ).addEventListener( 'click', event => { event.target.classList.toggle( 'strikethrough' ); });  
 .strikethrough {
    display: inline-block;
    position: relative;
    line-height: 1.5em;
}

.strikethrough:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    box-shadow: 0 1px rgba(252, 3, 3,0.7);
    margin-top: -0.7em;
    background: rgba(252, 3, 3,0.8);
    transform-origin: center left;
    animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;
    animation-fill-mode: backwards;
}

@keyframes strikethrough {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}  
 <span class="strikethrough">Favor packaging over toy</span>

Лично я бы воспользовался этим более простым способом, чтобы уменьшить количество реальных объектов на экране и объем кода, используя фоновое изображение для масштабирования. Если правильно настроить, вы могли бы даже сделать это многострочным (сделав фон высотой строки и добавив в него средний пиксель — а с помощью SVGS вы могли бы гарантировать, что он составляет всего 1 пиксель, независимо от растяжения и т. Д.).

 document.querySelector( 'p' ).addEventListener( 'click', event => {
  
  event.target.classList.toggle( 'strikethrough' );
  
})  
 @keyframes stretch {
  to { background-size: 100% var(--line-height); }
}

:root {

  --line-height: 1.2em;
  
}

p {

  line-height: var(--line-height);
  
}

.strikethrough {
  
  line-height: 1.2em;
  background: url('data:image/svg xml;charset=utf8,<svg  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><line x1="0" y1="50%" x2="100%" y2="50%" stroke="black" stroke-width="1px" /></svg>') repeat-y 0 0 / 0 var(--line-height);
  animation: stretch 4s;
  animation-fill-mode: forwards;
  
}  
 <p>Hello World!<br />Another line, does it work?</p>

Комментарии:

1. И как инициировать анимацию с помощью javascript…

2. @Pixier я знаю, ПОЭТОМУ меня всегда раздражает публикация, когда я впадаю в панику после нажатия tab, и теперь он выбирает кнопку публикации, а затем публикует…. Вздох. Это был преждевременный пост.