Не работает transform в Velocity.js?

Question

Андрей @Andrey_Tech

Не работает transform в Velocity.js?

Добрый день!
На днях решил освоить библиотеку Velocity.js и при работе столкнулся со следующей проблемой, при вызове velocity, когда в опциях я задаю scale или translateY, то велосити не срабатывает, в консоле ошибок нету, хотя к элементу добавляется класс velocity-animate. Для других опций, таких как opacity, width, height и т.д то все нормально работает, велосити нормально отрабатывает. Я в гугле порылся насчет этой проблемы, там писали что со второй версии надо писать опцию transform так: transform: 'scale(1.1)'. Так попробовал, тоже не сработало и в консоле, еще и появились ошибки. Подключал я библиотеки velocity.min и velocity.ui.min.

Вопрос задан более трёх лет назад
222 просмотра

3 комментария

Подписаться 1 Средний 3 комментария

Денис Богданов @den-bogdanov

Было бы лучше если бы вы прикрепили к своему вопросу ссылку на код в jsfiddle, codepen или еще где то, где можно быстро воспроизвести вашу проблему

Написано более трёх лет назад

Андрей @Andrey_Tech Автор вопроса

Денис Богданов, Это тестовый код:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Velocity.js</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>


	<div class="block"></div>
	
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="velocity.min.js"></script>
	<script src="velocity.ui.min.js"></script>
	<script src="script.js"></script>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 16px;
	min-width: 320px;
	width:  100%;
	overflow-x: hidden;
}

.block {
	width: 50px;
	padding: 50px;
	background-color: green;
	border-radius: 100%;
}

JS:

'use strict';

jQuery(document).ready(function($) {
	var option = {
	 scale: 1.2
	};
	var duration = {
		duration: 3000,
	};

	 $('.block').velocity(option, duration);

});

Ссылка на codepen - https://codepen.io/Sunser/pen/QobYzW

Написано более трёх лет назад

Модератор @TosterModerator

Андрей,
Не нужно писать комментарии в секции ответов

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как сделать коммуникацию front-end и back-end в реальном времени?
- 1 подписчик
- 7 минут назад
- 15 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Правильно ли настроен webpack.config для PWA приложения?
- 1 подписчик
- 40 минут назад
- 13 просмотров
0

ответов
C#

+4 ещё

Средний
Как правильно настроить считывание клавиш?
- 2 подписчика
- 3 часа назад
- 105 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 4 часа назад
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 14 часов назад
- 68 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 16 часов назад
- 32 просмотра
0

ответов
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 23 часа назад
- 140 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- вчера
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- вчера
- 302 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Сделать верстку для натяжки на wordpress по макету в figma

26 апр. 2024, в 14:21

10000 руб./за проект

Node JS Бек енд разработчик для доработки CRM системы авто салона

26 апр. 2024, в 14:10

60000 руб./за проект

Требуется Pure PhP + Symfony (Обязательно) разработчик для CRM/ERP

26 апр. 2024, в 14:07

3000 руб./в час

Было бы лучше если бы вы прикрепили к своему вопросу ссылку на код в jsfiddle, codepen или еще где то, где можно быстро воспроизвести вашу проблему
Денис Богданов, Это тестовый код:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Velocity.js</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block"></div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="velocity.min.js"></script> <script src="velocity.ui.min.js"></script> <script src="script.js"></script> </body> </html>

CSS:

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 16px; min-width: 320px; width: 100%; overflow-x: hidden; } .block { width: 50px; padding: 50px; background-color: green; border-radius: 100%; }

JS:
'use strict'; jQuery(document).ready(function($) { var option = { scale: 1.2 }; var duration = { duration: 3000, }; $('.block').velocity(option, duration); });

Ссылка на codepen - https://codepen.io/Sunser/pen/QobYzW
Андрей,
Не нужно писать комментарии в секции ответов

Answer 1 · 2019-02-28 11:02:06

Да, во второй версии изменилось API, и актуальная дока по нему находится здесь https://github.com/julianshapiro/velocity/wiki
Поэтому вместо:

var option = {
   scale: 1.2
  };

Нужно писать:

var option = {
   transform: ["scale(1.2)", "scale(1)"]
  };

Не работает transform в Velocity.js?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт