Scriptaculous: Как сделать слепой или скользящий, а не прыгать?Или это невозможно? - PullRequest
Новая
       6

Scriptaculous: Как сделать слепой или скользящий, а не прыгать?Или это невозможно?

0 голосов
/ 03 сентября 2010

Я видел странные явления при использовании эффектов Scriptaculous BlindDown и SlideDown, когда они плавно скользили, а затем в самом конце они прыгали на дополнительную величину, возможно, на 10% от расстояния скольжения.

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

Я все еще думал, что это должно быть моей ошибкой, когда я заметил, чтоТо же самое происходит на их демонстрационной странице для Toggle при нажатии на демонстрации Blind или Slide: http://wiki.github.com/madrobby/scriptaculous/effect-toggle

Firefox 3.6.7, Chrome 6 и Internet Explorer 8 - все отображают этот эффект на моемкомпьютер.

Поэтому я думал о том, чтобы просто списать его и либо жить с ним, либо исключить эффект, когда я заметил, что страница для BlindDown не отображает этот эффект: http://wiki.github.com/madrobby/scriptaculous/effect-blinddown

Так что должен быть способ заставить эту работу.На моей странице происходит переход, использую ли я непосредственно BlindDown / Slide или Toggle.

Кто-нибудь там использовал это и сумел сделать это без этой проблемы?Есть идеи, в чем секрет?

Ответы [ 7 ]

2 голосов
/ 05 марта 2012

Обычно это из-за полей или отступов. Элемент, который вы слепите, не должен иметь полей или отступов, или должен иметь margin:0.1%, чтобы содержащиеся поля не сворачивались через границы элемента. Если вы сделаете это, оно будет гладким, как шелк.

также - убедитесь, что вы установили overflow:hidden

Наслаждайтесь.

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

  elem.setStyle({position:'absolute',visiblity:'invisible'});
  elem.setStyle({'height':elem.getDimensions().height+'px'});
  elem.setStyle({position:'relative',visibility:'visible'}); //or position:'static'
1 голос
/ 25 мая 2012

Имейте в виду, что когда Scriptaculous начинает анимацию, изменяемый контейнер будет абсолютно позиционирован, а затем будет получена запись высоты, аналогичная той, о которой упоминает Даниэльшерсон.Однако, если контейнер не существует в относительно позиционированном родительском контейнере, тогда размеры анимационного контейнера могут довольно сильно измениться.Самый простой способ проверить это - изменить контейнер с помощью firebug, чтобы установить абсолютное положение.Что просходит?Изменилась ли высота?Для достижения наилучших результатов не должно быть никаких изменений в размерах вашего анимационного контейнера при переключении в абсолютное положение.То, что происходит с остальной частью вашего документа, например, с содержимым, перемещаемым под ним, не имеет значения.

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

<body style="margin: 0 auto; width: 300px; position: relative; background: black;">
  <div class="parent nonanimating clearfix">
    <div class="animating" style="float: left; width: 100%; background: white;">
      <div class="apply-your-margins-and-padding-here">
         ...content...
      </div>
    </div>
  </div>
  <div class="parent nonanimating clearfix">
    <div class="animating" style="float: left; width: 100%; background: white;">
      <div class="apply-your-margins-and-padding-here">
         ...content...
      </div>
    </div>
  </div>
</body>

Обратите внимание, что классы не работают и предназначены только дляссылка на мои комментарии, за исключением clearfix, который является хакером float clear.Фоны и ширина указаны только для того, чтобы дать лучший пример того, что происходит.Добавьте любую анимацию, которую хотите, в $$ ('. Animating')

Я использую эту (их много), хотя она старая, и я даже не создаю дизайн для многих браузеров.взломать поддерживает .. 

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
1 голос
/ 26 октября 2010

Определенно есть немного очень хорошо известный секрет ... Вы пытались обернуть свой контент в дополнительный контейнер div?Вы должны учитывать эту лучшую практику и почти требование, особенно при использовании эффектов Scriptaculous.

Например ... Допустим, вы хотите slideDown или переключить форму входа в систему - и у вас есть :: 

<div id="login-panel">
   <input type="text" name="username" />
   <button type="submit" name="send">Login</button>
</div>

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

<div id="login-panel">
<div><!-- extra div here -->
   <input type="text" name="username" />
   <button type="submit" name="send">Login</button>
</div><!-- close it here -->
</div>

Теперь, когда вы делаете что-то вроде Effect.toggle («панель входа», «слайд»);переход должен быть намного более плавным и менее нервным.Это может показаться немного неаккуратным, но это почти всегда помогает.Надеюсь, это поможет вам !!

1 голос
/ 08 октября 2010

По моему опыту, переход - это всего лишь проблема производительности, которая зависит от системных характеристик, браузера и сложности HTML-контента, который вы переключаете. Некоторые браузеры, такие как Safari и Chrome, имеют довольно хороший движок JavaScript, что делает их более эффективными.

Я вижу, что это происходит для вас, даже если вы используете хром? Является ли содержание HTML особенно сложным или ваш компьютер перегружен запущенными приложениями?

0 голосов
/ 08 апреля 2015

Я нашел успех с использованием position: relative; на элементе блока с использованием анимации слайдов / слепых. Убедитесь, что отступы / поля размещены на дочерних элементах, а не на элементе скользящего блока.

0 голосов
/ 12 сентября 2011

Чтобы эффект Scriptaculous не прыгал или дергался, удалите атрибут style из элемента, к которому вы применяете эффект.

Это: 

<div id="mydiv" style="padding:10px;margin:10px;">
  <button onClick="new Effect.BlindUp('mydiv');" />         
</div>

становится: 

<div id="mydiv">
  <button onClick="new Effect.BlindUp('mydiv');" />         
</div>

Стиль может быть помещен в закрытый элемент div следующим образом: 

<div id="mydiv">
  <div style="padding:10px;margin:10px;">
    <button onClick="new Effect.BlindUp('mydiv');" />
  </div>        
</div>

Проблема вызвана тем, что Scriptaculous повторно применяет объявления встроенного стиля элемента (mydiv) после выполнения эффекта.

0 голосов
/ 22 апреля 2011

Я не думаю, что это проблема производительности вообще. У меня та же проблема. Единственный способ заставить меня не прыгать - это определить высоту для скользящего элемента. Я понимаю, что это НЕ хорошее решение, но это единственное, что мне удалось найти. Я также попытался добавить дополнительный div, и это никак не повлияло на работу слайда Effect.toggle.

Если у кого-то еще есть информация по этому поводу, я весь в ушах.

...