如何为新元素添加样式并在创建时将其删除

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 代码可能如下所示：

.commentblock {
    animation: custom 1s;
}

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

您可以在此处找到更多详细信息：https://www.w3schools.com/css/css3_animations.asp