Задать значение ключевого кадра в качестве смещения? - PullRequest
Новая
       5

Задать значение ключевого кадра в качестве смещения?

0 голосов
/ 21 января 2019

Допустим, у меня есть div с указанным height из 100px, и я хочу анимировать его, чтобы он увеличился на фиксированную 20px высоту.

Фрагмент ниже показывает, как я успешно его реализовал. 

@keyframes foo {
    0% {
       height: 100px;
    }
    50% {
       height: 120px;
    }
    100% {
       height: 100px;
    }
}

#foo1 {
    background-color:blue;
    
    width:100px;
    height:100px;

    animation-name: foo;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
<div id='foo1'>

Но что, если мне нужно установить свойство height вне CSS, чтобы это не было конкретным значением 100px и его можно изменитьк любому другому значению, но все же я хочу анимировать увеличение height фиксированного 20px?

. Есть ли способ установить значение аниматона как смещение отисходное значение элемента?

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Увеличьте отступы, если у вас не будет контента, и это простая визуальная анимация: 

@keyframes foo {
    0%,100% {
       padding-bottom: 0px;
    }
    50% {
       padding-bottom: 20px;
    }
}

#foo1 {
    background-color:blue;
    
    width:100px;
    height:100px;

    animation-name: foo;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
<div id='foo1'>

Или используйте переменные CSS: 

@keyframes foo {
    0%,100% {
       height:var(--h,100px)
    }
    50% {
       height:calc(var(--h,100px) + 20px);
    }
}

#foo1 {
    background-color:blue;
    
    width:100px;
    height:var(--h,100px);
    display:inline-block;
    animation-name: foo;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
<div id='foo1'></div>
<div id='foo1' style="--h:50px;"></div>
0 голосов
/ 21 января 2019

Я не думаю, что есть прямой путь, но у вас есть несколько обходных путей:

  • используйте padding (например, padding-bottom), чтобы увеличить высоту элемента - применимо, только если элементне предполагается, что текстовое содержимое поступает в заполнитель
  • use border - так же, как и выше
  • используйте дополнительный элемент, например ::after
  • используйте JavaScript - есливы уже устанавливаете height "за пределами" CSS, может быть, вы устанавливаете его с помощью JS?
...