Created
August 2, 2014 03:18
-
-
Save QETHAN/a6eb96be6e260d3042dd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .has-transition { | |
| -webkit-transition: margin-left 1s ease-out; | |
| -moz-transition: margin-left 1s ease-out; | |
| -o-transition: margin-left 1s ease-out; | |
| transition: margin-left 1s ease-out; | |
| } | |
| li { | |
| background: #ccc; | |
| border: 1px #000 solid; | |
| display: block; | |
| padding: 2px; | |
| margin-left: 0; | |
| margin-top: 4px; | |
| margin-bottom: 4px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <p>1)</p> | |
| <ul class="example-1"> | |
| <li class="has-transition">1</li> | |
| <li class="has-transition">2</li> | |
| <li class="has-transition">3</li> | |
| <li class="has-transition">4</li> | |
| <li class="has-transition">5</li> | |
| </ul> | |
| <p>2)</p> | |
| <ul class="example-2"> | |
| <li class="has-transition">1</li> | |
| <li class="has-transition">2</li> | |
| <li class="has-transition">3</li> | |
| <li class="has-transition">4</li> | |
| <li class="has-transition">5</li> | |
| </ul> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Допустим, у нас есть элемент, | |
| к которому одно и то же свойство (margin-left) | |
| нам нужно применить сначала без анимации (установить в 100), | |
| а затем - анимировать посредством transition в значение 50. | |
| */ | |
| // 1) Этот вариант не работает, как мы ожидаем, т.к. изменения кешируются и применяются только в конце блока кода. Нужен принудительный reflow | |
| $('.example-1 li').click(function(){ | |
| // убираем класс с transition | |
| $(this).removeClass('has-transition'); | |
| // меняем свойство, ожидая, что transition отключён, ведь мы убрали класс | |
| $(this).css('margin-left', 100); | |
| // ставим класс с transition на место | |
| $(this).addClass('has-transition'); | |
| // меняем свойство | |
| $(this).css('margin-left', 50); | |
| }); | |
| // 2) Теперь всё работает как нам требовалось! | |
| $('.example-2 li').click(function(){ | |
| // убираем класс с transition | |
| $(this).removeClass('has-transition'); | |
| // меняем свойство | |
| $(this).css('margin-left', 100); | |
| // принудительно вызываем reflow, изменения в классе и свойстве будут применены сразу | |
| $(this)[0].offsetHeight; // как пример, можно использовать любое обращение к свойствам | |
| // ставим класс с transition на место | |
| $(this).addClass('has-transition'); | |
| // меняем свойство | |
| $(this).css('margin-left', 50); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment