Анимационные сбои на веб-сайте

Я сделал небольшой эксперимент, где я тестировал анимацию, которая произойдёт, когда вы снова нажмете на желтый квадрат, в jsfiddle ниже:

http://jsfiddle.net/aritro33/v86tE/5/

Тем не менее, я пытаюсь переместить анимацию, увиденную в этом jsfiddle, на jsfiddle здесь, когда вы нажмете кнопку compose / post circle /. Анимация будет применена к сообщениям. Это jsfiddle:

У меня возникают проблемы, но после того, как 3+ раза ударил кнопку компоновки и отправки, анимация разваливается.

Любые идеи о том, как поместить одну и ту же анимацию в первый jsfiddle во второй jsfiddle для сообщений?

Большое спасибо всем, кто может помочь!

HTML для второго эксперимента:

Compose Post
- No Posts Yet -
Write context text here:

    CSS для второго эксперимента:

      @import url(http://fonts.googleapis.com/css?family=Roboto:100); body { background-color: #2D3E50; } #compose { height: 215px; width: 215px; background-color: #EBF1F1; border-radius: 150px; position: relative; left: 100px; top: 40px; color: #2c3e50; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear; } #compose:hover { background-color: #219B86; color: #EBF1F1; } #firstspan { font-size: 39px; font-family:'Roboto'; position: relative; left: 22px; top: 75px; } #composeheader { height: 80px; width: 500px; background-color:#2AC0A3; position: relative; bottom: 175px; left: 365px; color: white; } #secondspan { color: white; font-family:'Roboto'; font-size: 40px; position: relative; background-color: #2AC0A3; border: 1px solid #2AC0A3; left: 15px; top: 10px; } #body { min-height: 80px; overflow: hidden; width: 500px; background-color: #C6EEE6; position: relative; left: 365px; bottom: 275px; padding: 20px; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } #thirdspan { color: black; font-family:'Roboto'; outline: 0px solid transparent; } .thirdspan2{ color: black; font-family:'Roboto'; outline: 0px solid transparent; } #thecolor { height: 50px; width: 50px; background-color: #2AC0A3; border-radius: 100px; position: relative; left: 365px; bottom: 315px; } .bubble { position: relative; left: 440px; bottom: 365px; width: 145px; height: 50px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .bubble:after { content:''; position: absolute; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: -15px; top: 15px; } #thehex { font-family:'Roboto'; font-size: 20px; height: 30px; width: 115px; background-color: white; position: relative; border: 0px none; outline: 0px solid transparent; top: 10px; left: 28px; } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounceInDown { 0% { -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY() } } @-moz-keyframes bounceInDown { 0% { -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY() } } @-ms-keyframes bounceInDown { 0% { -ms-transform: translateY(-2000px); } 60% { -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px) } 100% { -ms-transform: translateY() } } @-o-keyframes bounceInDown { 0% { -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px) } 100% { -o-transform: translateY() } } @keyframes bounceInDown { 0% { transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px) } 100% { transform: translateY() } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInUp { 0% { -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY() } } @-moz-keyframes bounceInUp { 0% { -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY() } } @-ms-keyframes bounceInUp { 0% { -ms-transform: translateY(2000px); } 60% { -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY() } } @-o-keyframes bounceInUp { 0% { -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px) } 100% { -o-transform: translateY() } } @keyframes bounceInUp { 0% { transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px) } 100% { transform: translateY() } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } #noposts { color: white; font-size: 39px; font-family:'Roboto'; position: relative; left: 440px; bottom: 100px; } #fourthspan { color: #2c3e50; font-family:'Roboto'; font-size: 39px; position: relative; left: 70px; top: 75px; } ul#allposts li{ min-height: 140px; width: 500px; position: relative; left: 239px; bottom: 432px; } .thecolor2{ height: 50px; width: 50px; border-radius: 100px; background-color: #2AC0A3; position: relative; bottom: 591px; left: 325px; } ul{ list-style-type: none; } .composeheader2{ height: 80px; width: 500px; background-color:#2AC0A3; position: relative; bottom: 581px; left: 325px; color: white; } .secondspan2{ color: white; font-family:'Roboto'; font-size: 40px; background-color: #2AC0A3; border: 1px solid #2AC0A3; position: relative; left: 17px; top: 13px; } .body2{ min-height: 80px; overflow: hidden; width: 500px; background-color: #C6EEE6; position: relative; left: 325px; bottom: 371px; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } 

    JS для второго эксперимента:

     var clicktwice = false; var color; var forrgb; var finalrgb2; var myheader; //198 238 230 //rgb(42, 192, 163) #2AC0A3 //rgb(198, 238, 230) #C6EEE6 //+156, +46, +67 $('#fourthspan').hide(); $('#thecolor').hide(); $('.bubble').hide(); $('#composeheader').hide(); $('#body').hide(); $('#compose').click(function () { setInterval(function () { $('#noposts').fadeTo(10, 0); }, 3000); }); $("#thehex").keyup(function () { color = $("#thehex").val(); forrgb = $("#thehex").val(); $("#thecolor").css("background-color", color); $("#secondspan").css("background-color", color); $("#secondspan").css("border-color", color); $("#composeheader").css("background-color", color); forrgb = $('#thehex').val().replace('#', ''); var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb; var conv = reg.match(/.{2}/g); var r = parseInt(conv[0], 16); r = r + 156; var g = parseInt(conv[1], 16); g = g + 46; var b = parseInt(conv[2], 16); b = b + 67; var rgb = r + ',' + g + ',' + b; rgb = rgb.replace(/NaN/g, ' ... '); var finalrgb = ('rgb(' + rgb + ')'); finalrgb2 = finalrgb; $("#body").css("background-color", finalrgb); }); $('#compose').click(function () { if (clicktwice === false) { color = "#2AC0A3"; finalrgb2 = "rgb(198, 238, 230)"; $("#secondspan").val("Write Header Here:"); $('#thirdspan').text("Write context text here:"); $('#thehex').val(color); $("#thecolor").css("background-color", color); $("#secondspan").css("background-color", color); $("#secondspan").css("border-color", color); $("#composeheader").css("background-color", color); $("#body").css("background-color", finalrgb2); $('#thecolor').fadeTo(0, 1); $('#body').fadeTo(0,1); $('.bubble').fadeTo(0,1); $('#composeheader').fadeTo(0, 1); $('#firstspan').hide(); $('#fourthspan').show(); $('#thecolor').show(); $('.bubble').show(); $('#composeheader').show(); $('#body').show(); $(".composeheader2").animate({ bottom: '-=248px' }, 400); $(".body2").animate({ bottom:'-=248px' }, 400); $(".thecolor2").animate({ bottom:'-=245px' }, 400); $('#thecolor').addClass('box animated bounceInDown'); $('.bubble').addClass('box animated bounceInDown'); $('#composeheader').addClass('box animated bounceInDown'); $('#body').addClass('box animated bounceInDown'); clicktwice = true; } else if (clicktwice === true) { myheader = $("#secondspan").val(); $('.bubble').fadeTo(300, 0); $('#firstspan').show(); $('#fourthspan').hide(); clicktwice = false; var thestream = document.getElementById('allposts'); var oneofpost = document.createElement('li'); var thecolor2 = document.createElement('div'); thecolor2.className = "thecolor2"; var composeheader2 = document.createElement('div'); composeheader2.className = "composeheader2"; var secondspan2 = document.createElement('span'); secondspan2.className = "secondspan2"; var body2 = document.createElement('div'); body2.className = "body2"; var thirdspan2 = document.createElement('span'); thirdspan2.className = "thirdspan2"; var bodytext = $('#thirdspan').html(); thirdspan2.innerHTML = bodytext; body2.style.backgroundColor = finalrgb2; secondspan2.innerHTML = myheader; thecolor2.style.backgroundColor = color; composeheader2.style.backgroundColor = color; secondspan2.style.backgroundColor = color; secondspan2.style.borderColor = color; $('#thecolor').fadeTo(0, 0); $('#body').fadeTo(0, 0); $('#composeheader').fadeTo(0, 0); thestream.appendChild(body2); thestream.appendChild(thecolor2); thestream.appendChild(composeheader2); composeheader2.appendChild(secondspan2); body2.appendChild(thirdspan2); $('#thecolor').removeClass('box animated bounceInDown'); $('.bubble').removeClass('box animated bounceInDown'); $('#composeheader').removeClass('box animated bounceInDown'); $('#body').removeClass('box animated bounceInDown'); } }); 

    Я очистил это много, код должен быть намного легче читать и следовать сейчас:

    HTML

      
    Compose Post
    - No Posts Yet -

    JavaScript

     var getRGB = function(color) { var rgb = color.replace('#', ''); rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb; var conv = rgb.match(/.{2}/g); var r = parseInt(conv[0], 16) + 156; var g = parseInt(conv[1], 16); + 46; var b = parseInt(conv[2], 16); + 67; rgb = r + ',' + g + ',' + b; rgb = rgb.replace(/NaN/g, ' ... '); rgb = ('rgb(' + rgb + ')'); return rgb; }; $(document).ready(function() { $('#all-posts').on('keyup', '.message.new .hexcolor', function () { var color = $(this).val(); $(".message.new .thecolor, .message.new .composeheader").css("background-color", color); $(".message.new .body").css("background-color", getRGB(color)); }); $('#message-actions').click(function () { if ($('.compose').is(':visible')) { $('#all-posts').prepend($('#empty-message').html()); } else { var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown'); $message.find('.composeheader > input').attr('readonly', true); $message.find('.body > span').attr('contenteditable', false); } $('#no-posts').hide(); $('.compose, .post').toggle(); }); }); 

    CSS

     @import url(http://fonts.googleapis.com/css?family=Roboto:100); /* css for animation */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounceInDown { 0% { -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY() } } @-moz-keyframes bounceInDown { 0% { -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY() } } @-ms-keyframes bounceInDown { 0% { -ms-transform: translateY(-2000px); } 60% { -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px) } 100% { -ms-transform: translateY() } } @-o-keyframes bounceInDown { 0% { -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px) } 100% { -o-transform: translateY() } } @keyframes bounceInDown { 0% { transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px) } 100% { transform: translateY() } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInUp { 0% { -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY() } } @-moz-keyframes bounceInUp { 0% { -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY() } } @-ms-keyframes bounceInUp { 0% { -ms-transform: translateY(2000px); } 60% { -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY() } } @-o-keyframes bounceInUp { 0% { -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px) } 100% { -o-transform: translateY() } } @keyframes bounceInUp { 0% { transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px) } 100% { transform: translateY() } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } /* page */ body { background-color: #2D3E50; font-family:'Roboto'; min-width: 960px; } /* message compose */ .message { margin-top: 40px; } .composeheader { background-color:#2AC0A3; color: white; padding: 10px 15px; clear: both; } .composeheader INPUT { color: white; font-size: 40px; background-color: transparent; border-width: 0; font-family: 'Roboto'; } .body { min-height: 80px; overflow: hidden; padding: 20px; background-color: #C6EEE6; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } .body > span { color: black; outline: 0px solid transparent; } .thecolor { height: 50px; width: 50px; background-color: #2AC0A3; border-radius: 100px; float: left; margin-bottom: 10px; } .bubble { display: none; } .message.new .bubble { height: 50px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; float: left; margin-left: 20px; display: block; } .bubble:after { content:''; position: absolute; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: 55px; top: 15px; } .hexcolor { font-size: 20px; height: 30px; width: 100px; background-color: transparent; border-width: 0px; margin: 10px 5px } /* compose button */ #message-actions { height: 215px; width: 215px; background-color: #EBF1F1; border-radius: 150px; position: relative; color: #2c3e50; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear; float: left; margin: 40px 100px 10px; } #message-actions:hover { background-color: #219B86; color: #EBF1F1; } #no-posts { color: white; font-size: 39px; float: left; margin-top: 120px; } .compose { font-size: 39px; position: relative; left: 22px; top: 75px; } .post { color: #2c3e50; font-size: 39px; position: relative; left: 70px; top: 75px; display: none; } /* messages */ #all-posts { min-height: 140px; width: 500px; float: left; } 

    jsFiddle Demo

    Используйте значащие имена для classов id и css, поэтому код намного проще отслеживать и понимать, что происходит. Стили, такие как «firstspan», ничего не значат и означают, что вам нужно постоянно оглядываться на разметку, чтобы выяснить контекст.

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

    EDIT 2: я изменил много селекторов идентификаторов, чтобы использовать и реорганизовать код, чтобы сделать его намного проще. Вы также устанавливали идентификатор на вновь созданных элементах, которые были одинаковыми, это неправильно, и вы будете вызывать проблемы дальше по строке (идентификаторы должны быть уникальными на странице). Я очистил JS, объединив несколько операторов, которые сделали то же самое с разными селекторами. Вы использовали множество стандартных вызовов JavaScript getElementById JavaScript, я изменил их, создав элементы DOM, используя jQuery.

    Я использовал объявление сценария html/template для создания новых элементов, это намного чище, чем использование jQuery для создания новых элементов DOM. Кроме того, ваши элементы компоновки и сообщения были, по сути, одинаковыми. Не повторяйте стили CSS, либо объединяйте несколько селекторов, либо просто используйте ту же структуру, что и я. Надеюсь, изменения имеют смысл.