Не работает 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.

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

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

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

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 23 часа назад
- 124 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 50 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 180 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 107 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 720 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 75 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 44 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 153 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Восстановить доступ к сайту на WordPress (вылечить trojan.inject)

25 нояб. 2024, в 21:02

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

Разобраться со скриптом на питоне

25 нояб. 2024, в 20:38

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

Запустить сервер на питон

25 нояб. 2024, в 20:37

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

Было бы лучше если бы вы прикрепили к своему вопросу ссылку на код в 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?

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

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

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