Форум

laimas · #11 (**permalink**) 06.06.2017, 20:41

winch,
вы сперва ответьте себе на вопрос чего вам надо. Ведь css анимация доступа только в CSS3, в версиях браузера не поддерживающих ее анимации не будет. Если вас это устраивает, можете делать на ней. Полезно будет сначала почитать что это такое. Там же и о поддержке.

Кроме этого в сети найдете и еще много ресурсов по ней с примерами различными.

Если же вас не устраивает такой расклад, то jQery .animate().

j0hnik · #12 (**permalink**) 06.06.2017, 20:45

<html>
<head>
	<meta charset="utf-8">
	<style>
	div{
		margin-top: 0px;
		transition: 1s;
		width: 20px;
		height:20px;
		border: 1px solid red;
	}
	.animate{
		margin-top: 320px;
	}
</style>
</head>
<body>
<button class="navbar-toggle">rerwrewrwer</button>
	<div class="f"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				$(".f").toggleClass("animate");
			});
		});
	</script>
</body>
</html>

вот вам пример из соседней темы

j0hnik · #13 (**permalink**) 06.06.2017, 20:46

свойство transition: изначально должно быть у элемента а не присваиваться вместе с классом

laimas · #14 (**permalink**) 06.06.2017, 20:48

Если же задача при наведении/уходе мыши конкретному объекту нечто увеличить/уменьшить, то есть простые зависимости, то можно transition. Примеров этому тоже достаточно, вот например, есть там и почитать об этом.

рони · #15 (**permalink**) 06.06.2017, 20:51

winch,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .right{
      margin:100px;
    }
    .left{
       margin:0px
    }
    .animate  {
      transition: all 1s;
    }
    .hot{
          border: 8px dashed Gray; padding: 5px; height: 100px; width: 100px;
     }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   var cls = ["left","right"];
    $(".hot").on("click" , function() {
    $(this).removeClass(cls.reverse().join(" ")).addClass("animate "+cls[0])
})
});
  </script>
</head>

<body>
 <style type="text/css">


   </style>
  <div class="hot">click me</div>

</body>
</html>

winch · #16 (**permalink**) 06.06.2017, 20:56

laimas,
кажется css3 сейчас уже практически все браузеры поддерживают.

а надо мне вот что: допустим делаю класс .ActiveItem и хочу чтобы при присвоении этого класса элемент плавно стал крупнее и переместился в центр. а при снятии этого класса - элемент тоже плавно вернулся к своему обычному состоянию.
но, как уже писал, параметры элементов должны быть не в js, а в css, чтобы настройки можно было делать не меняя скрипты, поэтому animate неподходит.

за ссылку спасибо, почитаю.

winch · #17 (**permalink**) 06.06.2017, 20:59

j0hnik,
теперь понятно, спасибо, попробую так …
кстати, по моим наблюдением при использовании transition изменения происходят не плавно, а какими-то скачками рывками. хотя может это от браузера зависит…

laimas · #18 (**permalink**) 06.06.2017, 21:05

Сообщение от winch

кажется css3 сейчас уже практически все браузеры поддерживают.

Это только новые, а проблема то не в этом, а в том какими браузерами пользуются ваши клиенты. Тут нужна статистика, ну или на кого вы изначально рассчитываете - только на современные, а что будет на старых вам наплевать. Или же вы пишите код так, чтобы даже пользователи старых браузеров не плевались на вашем сайте.

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

В общем по данному вопросу только вам решать.

Сообщение от winch

чтобы при присвоении этого класса элемент плавно стал крупнее и переместился в центр. а при снятии этого класса - элемент тоже плавно вернулся к своему обычному состоянию.

Код выше от рони, только размер прописать и позицию. Но сначала все-таки изучить вопрос, тем более что база то несложная, но при фантазии можно ей и чудеса делать, почти как в Голливуде.

рони · #19 (**permalink**) 06.06.2017, 21:06

Сообщение от winch

при использовании transition

плавность настраивается от предустановленных ease до формулы cubic-bezier

winch · #20 (**permalink**) 06.06.2017, 21:07

рони,
т. е. идея в том чтобы сделать служебный класс .animate и каждый раз при изменеии состояния элемента добавлять этот класс?
ок, попробуем так.

Форум

Справочник

Discord чат

Курсы javascript