Помогите с алгоритмом.

[amelice]

Нужно сделать ротатор.

Фишка в том, что он неопределенной высоты в определенном разрешении окна, допустим, когда ширина окна < 1000 пикселей.

 

Желаемый эффект: чтоб когда один слайд плавно исчезал, второй был бы за ним.

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

 

http://codepen.io/amelice/pen/JGKbB?editors=001

 

upd: и не только дерганый, в добавок с белой заставой.

Edited May 23, 2014 by amelice

[nerv]

Почему бы не взять готовый и проверенный?

Или хочется написать свой? Если свой, то лучше использовать css анимации.

 

в очередной раз постчу ссылку http://nervgh.github.io/pages/angularjs-and-animatecss/

Edited May 23, 2014 by nerv

[npofopr]

А я в очередной раз про свой любимый слайдер http://coolcarousels.frebsite.nl/c/72/ )

Полистайте все примеры. Там есть вроде похожий.

[amelice]

Почему бы не взять готовый и проверенный?

Или хочется написать свой? Если свой, то лучше использовать css анимации.

 

в очередной раз постчу ссылку http://nervgh.github.io/pages/angularjs-and-animatecss/

Потому что, по каким то критериям не подходят готовые.

Вопрос не в том, что каким способом анимацию производить, а как продумать алгоритм так, чтоб можно было

1. высоту неопределенную сохранить (сайт адаптивный, блок с одной части переходит в другую, и сами слайды разной высоты),

2. и плавность в анимации добиться.

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

 

По ссылке анимация fadeIn не плавная, анимация от  белой пелены (или как правильно назвать?).

А я в очередной раз про свой любимый слайдер http://coolcarousels.frebsite.nl/c/72/ )

Полистайте все примеры. Там есть вроде похожий.

не нашла похожего, за ссылку спасибо. интересные примеры.

[nerv]

1. высоту неопределенную сохранить

Как ты собралась сохранить то, что не определено?) Задай функцией область определения.

 

По ссылке анимация fadeIn не плавная

анимация такая, какая прописана в animate.css

[amelice]

Как ты собралась сохранить то, что не определено?) Задай функцией область определения.

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

Edited May 26, 2014 by amelice

[mishka]

активный слайд показан, остальные скрыты.

 

При анимации у нас есть активный слайд(в данный момент) и следующий слайд(тот который надо показать).

Есть маска -- блок в котором находятся слайды.

При начале смены слайда узнать высоту активного слайда и задать ее маске. Слайдам задать абсолютное позиционирование.

Узнать высоту следующего слайда. Можно показать слайд, и задать ему opacity: 0, так как он на абсолюте то он не растянет маску

Начать анимацию слайдов(opacity) и одновременно анимировать высоту маски до высоты следующего слайда.

 

После окончания анимации скрываем ненужные слайды, показываем нужный, убираем абсолютное позиционирование со слайдов, убираем высоту с маски.

[Sensei]

Набросал, как вариант http://jsfiddle.net/vcth8/2/

Edited May 26, 2014 by Sensei

[nerv]

аналогично http://learn.javascript.ru/play/Y6Asr

[amelice]

Спасибо!

При анимации у нас есть активный слайд(в данный момент) и следующий слайд(тот который надо показать). Есть маска -- блок в котором находятся слайды. При начале смены слайда узнать высоту активного слайда и задать ее маске. Слайдам задать абсолютное позиционирование. Узнать высоту следующего слайда. Можно показать слайд, и задать ему opacity: 0, так как он на абсолюте то он не растянет маску Начать анимацию слайдов(opacity)

Мне не нужно высоту маски анимировать, а все остальное ОТЛИЧНО получается. )

Ссылку обновила http://codepen.io/amelice/pen/JGKbB?editors=001, если кому интересно )

Edited May 27, 2014 by amelice