Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
shmonoff
1 / 1 / 2
Регистрация: 07.04.2013
Сообщений: 41
1

Не работает css-анимация

04.03.2015, 06:17. Просмотров 423. Ответов 3
Метки нет (Все метки)

Всем привет! Не понимаю почему игнорируется css transition:
HTML5
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class='add-elem'></div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.add-elem {
  width:100px;
  height:30px;
  background:red;
}
.new-elem {
  height:0px;
  width:100px;
  background:green;
  transition: height 1s
}
.set-height {
  height:50px;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var elem = document.querySelector('.add-elem'),
      body = document.querySelector('body');
 
var addNewElem = function(e) {
 
  var div = document.createElement('div');
 
  div.className = 'new-elem';
  body.appendChild( div );
  
};
 
elem.addEventListener('click', addNewElem, false);
 
body.addEventListener( 'DOMNodeInserted',
    function(e) {
        e.target.classList.add('set-height');
    }, false);
Пример на jsbin: http://jsbin.com/moyamovijo/1/edit?js,output
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.03.2015, 06:17
Ответы с готовыми решениями:

Анимация на css
Всем добрый день! Подскажите пожалуйста, хочу сделать следующую анимацию: ...

Не работает анимация
Здравствуйте! Проблем, хелп мииии! Пользовался советами одного вроде бы...

Не работает анимация
&lt;html&gt; &lt;head&gt; &lt;script Language=JavaScript&gt; function init() {var canvas =...

Не работает анимация
Хай :senor: &lt;div id=&quot;loading_body&quot;&gt;&lt;div id=&quot;loading&quot;&gt;&lt;/div&gt;&lt;/div&gt; #loading ...

Не работает плавная анимация
Есть блок. Если нажать на этот блок, то страница скроллится на самый верх....

3
UchihaSV
221 / 182 / 92
Регистрация: 08.06.2013
Сообщений: 614
04.03.2015, 06:46 2
Может потому что закрывающий ; не поставили?
И посмотрите на: http://htmlbook.ru/css/transition правильный его синтаксис.
0
shmonoff
1 / 1 / 2
Регистрация: 07.04.2013
Сообщений: 41
04.03.2015, 08:23  [ТС] 3
без комментариев
0
NULLisempty
0 / 0 / 0
Регистрация: 16.01.2015
Сообщений: 6
08.03.2015, 16:37 4
Во первых это не CSS анимация и никто так не анимирует
Лучше научись CSS анимаций

вот сайт:http://www.w3schools.com/css/css3_animations.asp если не понимаешь английский то: http://ruseller.com/lessons.php?rub=2&id=1689
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.03.2015, 16:37

Меню (CSS) не работает в Опере и Лисе
Может кто нибудЬ объяснить, я забабахла простую менюшку, мне друрой не надо, и...

Не работает изменение css и изменение текста
Не понимаю почему этот js код не работает: function load(){ var output =...

В Webview не работает анимация CSS
Всем доброго времени суток! Нужно сделать приложение на основе сайта, на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru