网站上的动画故障

Question

我做了一个小规模的实验，我正在测试一个动画，当你在下面的jsfiddle中反复击中黄色方块时会发生这种情况：

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

然而，当你点击撰写/发布圈子/按钮时，我试图将jsfiddle中看到的动画移动到jsfiddle。动画将应用于帖子。这是jsfiddle：

然而，我遇到了问题，经过3次以上点击撰写和发布按钮后，动画就崩溃了。

任何想法如何在第二个jsfiddle的第一个jsfiddle中看到相同的动画用于帖子？

非常感谢任何能提供帮助的人！

第二次实验的HTML：

<div id="compose"><span id="firstspan">Compose</span>
 <span id="fourthspan">Post</span>

</div>
<span id="noposts">- No Posts Yet -</span>

<div id="composeheader">
    <input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
    <input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>

</div>
<ul id="allposts"></ul>

第二次实验的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');



    }

});

Answer 1

我已经清理了很多，代码应该更容易阅读并立即关注：

<强> HTML

<script id="empty-message" type="html/template">
    <div class="message new box animated bounceInDown">
        <div class="thecolor"></div>
        <div class="bubble">
            <input type="text" class="hexcolor" value="#2AC0A3" />
        </div>
        <div class="composeheader">
            <input type="text" value="Write Header Here:" />
        </div>
        <div class="body">
            <span contenteditable="true">Write context text here:</span>
        </div>
    </div>    
</script>

<div id="message-actions">
    <span class="compose">Compose</span>
    <span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>

<强>的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

为id和css类使用有意义的名称，它使代码更容易理解并了解正在发生的事情。诸如“第一次”之类的风格毫无意义，意味着你必须继续回顾标记以找出背景。

我尽我所能清理了这个，我不熟悉CSS3或动画的东西，我会留给你解决这个问题。我认为这应该是完全按照您的预期工作，消息向下滑动并自上而下添加到堆栈中。

编辑2： 我更改了许多ID选择器以使用和重构代码以使其更简单。您还在新创建的元素上设置ID，这些都是相同的，这是错误的，并且会导致您进一步发布问题（ID应该是每页唯一的）。 我清理了JS，结合了多个语句，这些语句对不同的选择器做了同样的事情。你使用了很多标准的JavaScript getElementById类型调用，我改为使用jQuery创建DOM元素。

我使用html/template脚本声明来创建新元素，它比使用jQuery构建新的DOM元素更清晰。此外，您的撰写和发布元素基本上是相同的。不要重复CSS样式，要么组合多个选择器，要么重新使用与我相同的结构。希望这些变化是有道理的。