Можете ли вы изменить встроенные атрибуты ключевого кадра анимации CSS3 (например, в атрибуте стиля HTML)? - PullRequest
Новая
       11

Можете ли вы изменить встроенные атрибуты ключевого кадра анимации CSS3 (например, в атрибуте стиля HTML)?

15 голосов
/ 28 июня 2011

Можно ли изменить атрибуты ключевого кадра анимации, выполнив встроенные корректировки.

Возьмем, к примеру, 

@-moz-keyframes slidein {
    from {
        width: 10%;
    }

    to {
        width:50%;
    }
}

Можно ли изменить атрибут ширины в части 'to'ключевого кадра, выполнив что-то вроде 

<div id="someID" style="change keyframe here">

В настоящее время я просто динамически создаю всю таблицу стилей на странице для настройки ключевых кадров.

Этот метод работает,однако я бы предпочел настроить атрибуты для простоты.

Ответы [ 5 ]

12 голосов
/ 06 октября 2011

Эй, давайте подумаем немного по-другому ... Возможно, вы не сможете сделать это ... 

<div id="someID" style="change keyframe here">

, но подумайте, как это сделать ... 

<script>
var createdStyleTag = document.createElement("style");
createdStyleTag.textContent = "@-*whatevaVendor*-keyframes someAnimationName{"+
    "from { width: **SOMETHING YOU DECLARE THROUGH JS**; }"+
    "to{ width: 10%; }"+
"}";

document.body.appendChild(createdStyleTag);
</script>

Это довольно открыто для всего, что вы хотите сделать ... у вас всегда будут классы, которые вы будете помещать в элементы, но иногда мы не хотим постоянно иметь одинаковые "от" и "до", так что это может быть одним из способовсделайте это ... в основном вы динамически создаете элемент стиля, помещаете любую строку, которая в конечном итоге будет являться нужным текстом стиля, а затем добавляете ее к телу ... работаете довольно хорошо ... используете ее в своей собственной структуре ... Яне делайте это точно так, но я написал это для наглядности ... причина, по которой это работает хорошо, заключается в том, что большая часть моего DOM также создается динамически, так что это может иметь больше смысла в этой реализации...

Нет ничего невозможного ... просто подумай вне div

12 голосов
/ 31 июля 2011

Нет.так как анимация не объявлена ​​ в элементе, она только называется для него.Это все равно что пытаться добавлять методы в объект, а не в класс.Не возможно, извините;)

3 голосов
/ 04 октября 2014

Я тоже искал решение для встроенного ключевого кадра. По крайней мере, для значения "до". CSS-хитрости дают хорошее решение, просто забудьте «до» и поместите ширину в строку;) http://css -tricks.com / одушевленные к ан-инлайн-стиль /

0 голосов
/ 05 февраля 2017

, как сказал @Zetura, лучший способ сделать это - забыть свойство "to", и оно примет значение по умолчанию ширины или высоты или любую вещь, которую вы поместите в качестве примера для меня: 

@keyframes slideInUp {
    0% {
        height: 0px;

    }

}
0 голосов
/ 01 декабря 2012

Это решение очень похоже на то, которое вы уже внедряете, но оно очень хорошо объяснено и продумано: Установка значений ключевых кадров Webkit с помощью переменной Javascript

...