Как добавить стиль к новому элементу и удалить его при его создании

Question

У меня есть код JavaScript, который создает новый элемент при нажатии кнопки, и у меня есть вопрос. Вот мой код JavaScript:

var comment = document.querySelector("#AddComment");
var req = new XMLHttpRequest();

if(comment){
    comment.addEventListener("click", function () {
        var csrftok = '{{ csrf_token }}';
        req.open('POST', '{{ request.path }}');
        CommentBlock = {
            "text": comment.previousElementSibling.value,
            //'csrfmiddlewaretoken': csrftok,
        };
        req.setRequestHeader('X-CSRFToken', csrftok);
        req.setRequestHeader("Content-Type", "application/json");
        req.onreadystatechange = function () {
            if(req.readyState == 4) {
                let text = document.createElement('div');
                text.innerHTML = req.responseText;
                let comment_blocks = text.querySelector("#comments").getElementsByClassName("commentblock");
                let new_block = comment_blocks[comment_blocks.length - 1];
                document.querySelector("#comment_addform").before(new_block);
            };
        };
        req.send(JSON.stringify(CommentBlock));
    });
}

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

UPD. Мой HTML-код:

<div class="jumbotron col-md-7 col-md-push-2" id="comments" data-aos="fade-up">
{% for comment in post.comments.all %}
    {% if comment.is_parent %}
    <div class="commentblock">
        <div class="row">
            <div class="col-sm-2 col-md-2">
                <div class="thumbnail">
                    <img class="img-responsive user-photo" src="{{ comment.author.profile.image.url }}">
                </div>
            </div>

            <div class="col-sm-9 col-md-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>{{ comment.author }}</strong> {# <span class="text-muted">commented 5 days ago</span> #}
                    </div>
                    <div class="panel-body">
                        {{ comment.text }}
                    </div>
                    <div class="panel-footer" id="answers_{{ comment.id }}">
                        {% for child in comment.children %}
                            <div class="answerblock">
                                <div class="row col-md-push-1">
                                    <div class="col-sm-2 col-md-2">
                                        <div class="thumbnail">
                                            <img class="img-responsive user-photo" src="{{ child.author.profile.image.url }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-10 col-md-10">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <strong>{{ child.author }}</strong> {# <span class="text-muted">commented 5 days ago</span> #}
                                            </div>
                                            <div class="panel-body">
                                                {{ child.text }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        <form method="post" id="answer_addform_{{ comment.id }}">
                            <div class="form-group">
                                {% csrf_token %}
                                <input type="hidden" name="parent_id" value="{{ comment.id }}">
                                {{ comment_form.text|add_class:'form-control'|attr:'cols:'|attr:'rows:' }}
                                <input type="reset" class="btn btn-sm btn-block AddAnswer" onclick="sendreqfor_answer(this)" value="Ответить"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Если я правильно вас понял, лучшим вариантом будет использование CSS-анимации.

Я не уверен, какой элемент вы пытаетесь анимировать, но допустим, что этот элемент имеет класс "commentblock". Если вы хотите сделать анимированную анимацию, тогда ваш код CSS может выглядеть так:

</p>

<pre><code>.commentblock {
    animation: custom 1s;
}

@keyframes custom {
    0% {
        display: block;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Более подробную информацию вы можете найти здесь: https://www.w3schools.com/css/css3_animations.asp