анимация: перемещение элемента из одной позиции в другую

Question

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

Отказ от замечательных эффектов Apple OS в нескольких приложениях, таких как iMovie, когда вы меняете библиотеку историей видео, я пытаюсь сделать простое движение из элемента div ... но это оказалось немного сложным.

Вопрос будет, кто-нибудь знает какую-либо библиотеку, чтобы сделать то же самое проще / лучше?

Что я мог сделать за 5 минут, так это:

http://jsbin.com/efihax

редактировать ссылку: http://jsbin.com/efihax/edit

Моя идея так плавно уменьшить .hero-unit div и сделать так, как будто он был добавлен в Список ожидания

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

Есть ли другой способ? Думал о CCS3 переходах / анимациях, но я не настолько знаком с этим и до сих пор не знаю, как я мог это сделать ...

Изображение, показывающее, чего я пытаюсь достичь с помощью animate

Answer 1

Некоторые проблемы с вашим кодом:

• Обратный вызов fadeOut будет вызываться один раз для каждого исчезающего элемента.Ваш код может работать более плавно, если вы отбросите обратный вызов и вместо этого установите тайм-аут, чтобы начать выполнение остальной части кода только один раз, когда анимация рассчитана до конца.

• Когда вы начинаетеВ вашей анимации вы установили position: absolute, но ваш размер и положение элемента по-прежнему определяются его позицией DOM, поэтому он будет прыгать, как только вы начнете анимировать эти свойства.

  В течение времени ожидания,попробуйте установить начальные свойства:

    orig
      .css({
        'position':'absolute',
        'width':orig.width(),
        'height':orig.height(),
        'left':orig.position().left,
        'top':orig.position().top
      });
  
    orig.empty(); 
  

• Ваш элемент в настоящее время отображается ниже .waitList .label из-за его margin, и он кажется больше, чем 1x1 px из-за его padding,Попробуйте также анимировать их.

Моя правка вашего кода

Обновление

Я понялчто составные стили не очень хорошо анимируются.Чтобы получить плавный переход, вам нужно анимировать margin-top и margin-bottom по отдельности, а не просто margin, и то же самое со всеми четырьмя padding свойствами.

My updatedкод

Answer 2

Проблема в том, что вы не анимируете контейнер. Просто изменив анимированный элемент на «контейнер», элемент полностью исчез. Обойдите его некоторое время, и оно будет работать.