Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перенести класс css из html в js в рабочем скрипте (https://javascript.ru/forum/misc/56919-perenesti-klass-css-iz-html-v-js-v-rabochem-skripte.html)

mrtdiesel 09.07.2015 22:24

Перенести класс css из html в js в рабочем скрипте
 
Кнопка с анимацией при скролле:
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a>
Где toanimate - класс который меняет js на animated, (анимация css без js работает так: animated tada)
а data-animation="tada" вид анимации, его и надо засунуть в js чтобы менять tada уже в самом js.
blockToAnimate.each(function(){		
			if(jQuery(this).offset().top < (jQuery(window).scrollTop() + jQuery(window).outerHeight()) && jQuery(this).offset().top + jQuery(this).outerHeight() > (jQuery(window).scrollTop() ) ) {
				if (!jQuery(this).hasClass("animated")) { 
					jQuery(this).addClass("animated"); 					
					animation_type = jQuery(this).data('animation');
					jQuery(this).addClass(animation_type); 
					} 				
			} else {
				jQuery(this).removeClass("animated"); //jQuery(this).trigger('animateOut');
				animation_type = jQuery(this).data('animation');
				jQuery(this).removeClass(animation_type); 
			}
	});
Буду признателен за помощь :thanks:

kostyanet 10.07.2015 05:41

Оно уже засунуто, ну и дальше-то что?

mrtdiesel 10.07.2015 09:42

Возможно я не правильно выразился :)
Нужно сократить ссылку:
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a>

До вида:
<a href="#" class="toanimate">КНОПКА</a>

Тип анимации (data-animation="tada") указывать уже в js.

mrtdiesel 10.07.2015 17:51

Ну или сделать так, что бы ссылка была с двумя классами подряд:
Вместо:
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a>

Сделать:
<a href="#" class="toanimate tada>КНОПКА</a>

Но что бы js смог обрабатывать это.

AntonMs 10.07.2015 17:52

jQuery -
$("елемент").removeAttr("data-animation")

JavaScript -
елемент.removeAttribute("data-animation")

Это удаления атрибута

kostyanet 10.07.2015 21:19

Я ничего все равно не понял, кроме одного - автор знает что надо сделать, что на что поменять, какие строки на какие и все такое - но хочет чтобы это сделали за него?

mrtdiesel 11.07.2015 02:48

Извиняюсь что не понятно выражаю мысль. Попробую иначе.
Я не знаю пока что поменять в js. Но убрав в хтмл data-animation="tada"
необходимо что бы функциональность обьектов, в данном случае ссылок сохранилась (те можно было менять тип анимации уже в самом js.

Deff 11.07.2015 02:52

mrtdiesel,

1. Зачем убирать ?
2. Если значение для всех объектов идентично, - то да - перенести эту переменную в скрипт - логично,
если различно и не имеет неизменного алгоритма применительно к селекторам объектов - перенос нелогичен
3. Приведите все возможные варианты анимаций и их параметры (или алгоритм)
Я не понял что означает tada или чтобы менять tada уже в самом js.
Оно как-то связано с цифровым значением ?
4. Приведите стиль текущей анимации на css (Для нескольких вариантов tada и т.д.)

mrtdiesel 11.07.2015 03:15

1. Когда в хтмл будет только 1 или 2 класса, без дополнительных типов, ковычек - проще, во всяком случае мне :)
2. Необходимо менять переменную (в данном случае "tada" на другие уже в js, руками по желанию, а не по алгоритму.
3. "Tada" - 1 из видов анимации. При подключенном внешнем css файле работает так: class="animated tada;"
Все возможные варианты анимации с сайта animate.css
4. "tada" - вид анимации. И работал бы в кнопке БЕЗ js в таком виде:
<a href="#" class="animated tada">КНОПКА</a>
, но для управления анимацией через js приходится стоку писать уже с большим кол-вом слов + заключать тип анимации "tada" в ковычки (чего я не хочу делать если перенести смену типа анимации в код js, который, например, можно положить на внешний сервер).
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a>
, и js уже ищет и меняет класс animate на правильный - animated и подставляет переменную, которую как раз и нужно менять не в хтмл а js.
В общем надо управлять типом анимации в js. Так будет понятнее :) а уж попутно решится моя проблема - хтмл строка уменьшится после переноса типа анимации в js))

mrtdiesel 11.07.2015 04:35

Цитата:

Сообщение от Deff
Ок - завтра гляну

Спасибо.
А зачем типы анимации нужны в js? Они и так все указаны в файле css что скачивается с сайта
Но все равно сделал. В строчку и столбик.
хтмл можно будет таким писать?
<a href="#" class="toanimate tada">КНОПКА</a>
или еще лучше таким?
<a href="#" class="toanimate">КНОПКА</a>
Только не привязывайте поиск классов только к ссылкам. Хочется использовать анимацию не только к тегу "a", а к любым обьектам.

mrtdiesel 11.07.2015 04:50

Думаю, понял зачем нужны все типы анимации. Наверно по двум словам сразу - проще искать и при этом будет сразу тип анимации известен и преобразовывать в класс уже в js.
В таком случае я не удобный вид предоставил. Вот более удобный: animate + тип анимации Пусть js смотрит на один из видов, после того как найдет, он должен их переделать с
animate tada
в animated tada.
Тк если сразу написать правильно класс animated tada, то будет срабатывать анимация уже от цсс, а надо не напрямую, а только во время прокрутки.
На том сайте откуда взял анимацию цсс, говорится про обьединение js, но я пока слобоват в этом.

Deff 11.07.2015 05:28

Цитата:

Сообщение от mrtdiesel
Только не привязывайте поиск классов только к ссылкам. Хочется использовать анимацию не только к тегу "a", а к любым обьектам.

Ок

kostyanet 11.07.2015 06:38

Цитата:

Сообщение от mrtdiesel
но я пока слобоват в этом

Слобость не порок. Любой слобый может стать сильным если захочет понять что он хочет. Тут надо знать какое слово должно быть в "ковычках"

Вы лично что хотите сделать, как это должно выглядеть в браузере, в глазах юзера?

mrtdiesel 11.07.2015 12:49

Да, что должно быть в ковычках сделал.
Согласен про слабости и силу. Желаю вам, себе и всем глубоко понять чего мы хотим и захотеть сделать что-то стоящее :)
В браузере анимация в обе стороны. js скрипт что я кинул - лишь часть его, но дальше, я думаю сам смогу. Для меня главное сократить строку
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a>
до вида
<a href="#" class="toanimate tada">КНОПКА</a>
и менять тип анимации уже в js или в том же хтмл (похоже так выйдет). Еще интересно, если я буду добавлять классы через пробел в хтмл, то js сможет увидеть или нужно то что в ковычках только то что будет искать js и добавив еще один класс по стилю кнопки js уже не найдет то, что должен?

Deff 11.07.2015 15:43

mrtdiesel,
Ну в основном доделал, сейчас убегаю (выложу к ночи)
1. Хочется посмотреть страницу с примером анимированного контента (любой вариант анимации)
2. Анимация должна возникать сразу по загрузке элемента ? Или после загрузки всей страницы(всех элементов) ?
3. Есть такое предложение: Могу повесить выпадающее меню (<select>) с юзер-выбором типа анимации либо одновременно для всех элементов, либо при наведении на конкретный элемент - появляется менюшка выбора типа анимации именно для этого элемента( стиль менюшки Вы сможете править - поставим уникальный класс).
4. Версия jQuery ? (можно глянуть реальную страницу ?)

Deff 11.07.2015 22:29

Синхронизации моих ожиданий не получилось, думал до 6 вечера MSK получить от Вас ответы и добить код... Продолжу завтра. Если сегодня будете, - отпишитесь про что сможете по сообщению №15

mrtdiesel 11.07.2015 23:41

1. Скинул.
2. Анимация работает во время движения вверх и вниз.
3. Не против, в таком случае можно сделать: появление при скролле вниз, в обе стороны, один раз, повторять. Но на этом я не настаиваю. Если есть желание.
4. jQuery v1.11.0 реальную страницу скинул.

Deff 13.07.2015 21:42

mrtdiesel,
ГМ, открыл файл, увидел что анимация происходит при скролле,
Именно при скролле и нужна ?
Т.е. пока не очень понял когда и при каких условиях добавлять снимать класс.

Сейчас скрипт добавляет класс при скролле страницы и при появлении элемента в пределах окна просмотра контента и снимает за его пределами.

mrtdiesel 14.07.2015 19:15

Все правильно, так и нужно. Я только хотел сократить часть кода в хтмл немного подкорректировав js. Об остальном не просил. Скрипт работает во всех браузерах и во всех разрешениях, его работой я доволен - работает отлично, не то что другие скрипты.

Deff 14.07.2015 19:30

mrtdiesel,
Ок, постараюсь, что успею до завтрашнего обеда (15.07.2015) , позже сборы начнутся

mrtdiesel 28.07.2015 21:33

Есть кто живой?

EmperioAf 28.07.2015 21:56

Цитата:

Сообщение от mrtdiesel (Сообщение 381970)
Есть кто живой?

врядли


Часовой пояс GMT +3, время: 21:56.