Javascript 所需的PHP文件有时会以不同的方式设置动画

好的，所以基本上在成功（或不成功）注入数据库之后，我需要一些php文件。 这是一个相当基本的动画。只是一个“滴答”或“X”的动画，说明它是否正常。 然而问题是，有时它的动画效果不同。 想要的效果是出现和消失的动画。 我的“滴答声”或“X”要么工作正常，要么没有“出现”动画，滴答声/X只是在屏幕上非常明显，然后它们就会消失

CSS（如果需要）：

<style>

.circ{
    opacity: 0;
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.tick{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 2s 1s ease-out;
    -moz-transition: stroke-dashoffset 2s 1s ease-out;
    -ms-transition: stroke-dashoffset 2s 1s ease-out;
    -o-transition: stroke-dashoffset 2s 1s ease-out;
    transition: stroke-dashoffset 2s 1s ease-out;
}
.drawn + svg .path{
    opacity: 1;
    stroke-dashoffset: 0;

}
#tick1{
    padding-left: 2vh;
    height: 18vh;
    width: 18vh;
}

#komunikat {
    color: white;
    border-radius: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 22vh;
    width: 22vh;
    display: block;
    padding: 25px;
    background-color: rgba(255,255,255,0.2);
}

#tekst {
    font-size: 2vh;
    line-height: 2vh;
    text-align: center;
    position: absolute;
    bottom: 2vh;
    width: 18vh;
    margin-left: 2vh;
}

</style>

<script>
document.getElementById("trigger").classList.add("drawn");
setTimeout(function(){
    document.getElementById("trigger").classList.remove("drawn");
    document.getElementById("komunikat").style.visibility = "hidden";
},3000)
</script>

.中国保监会{
不透明度：0；
行程：130；
行程偏移：130；
-webkit转换：所有2；
-moz转换：所有2s；
-ms转换：全部2秒；
-o-过渡：所有2s；
过渡：所有2；
}
.滴答声{
行程：50；
行程偏移：50；
-webkit过渡：行程缓冲1s放松；
-moz转换：冲程偏移2s 1s缓解；
-ms转换：行程偏移2s 1s缓解；
-o型转换：行程偏移2s 1s缓解；
过渡：行程偏移2s 1s缓解；
}
.draw+svg.path{
不透明度：1；
笔划偏移：0；
}
#滴答声1{
左：2vh；
高度：18vh；
宽度：18vh；
}
#共青团{
颜色：白色；
边界半径：20px；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：22vh；
宽度：22vh；
显示：块；
填充：25px；
背景色：rgba（255255,0.2）；
}
#特克斯特{
字号：2vh；
线高：2vh；
文本对齐：居中；
位置：绝对位置；
底部：2vh；
宽度：18vh；
左边距：2vh；
}

HTML:

<div id="komunikat">
<div id="tick1">
<div id="trigger"></div>
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">
    <path class="circ path" style="fill:none;stroke:#0f0;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" d="
    M30.5,6.5L30.5,6.5c6.6,6.6,6.6,17.4,0,24l0,0c-6.6,6.6-17.4,6.6-24,0l0,0c-6.6-6.6-6.6-17.4,0-24l0,0C13.1-0.2,23.9-0.2,30.5,6.5z"
    />
    <polyline class="tick path" style="fill:none;stroke:#0f0;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
    11.6,20 15.9,24.2 26.4,13.8 "/>
</svg>
</div>
<div id="tekst">Urządzenie Wypożyczone</div>
</div>

乌尔兹涅-维波区

JS:

<style>

.circ{
    opacity: 0;
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.tick{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 2s 1s ease-out;
    -moz-transition: stroke-dashoffset 2s 1s ease-out;
    -ms-transition: stroke-dashoffset 2s 1s ease-out;
    -o-transition: stroke-dashoffset 2s 1s ease-out;
    transition: stroke-dashoffset 2s 1s ease-out;
}
.drawn + svg .path{
    opacity: 1;
    stroke-dashoffset: 0;

}
#tick1{
    padding-left: 2vh;
    height: 18vh;
    width: 18vh;
}

#komunikat {
    color: white;
    border-radius: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 22vh;
    width: 22vh;
    display: block;
    padding: 25px;
    background-color: rgba(255,255,255,0.2);
}

#tekst {
    font-size: 2vh;
    line-height: 2vh;
    text-align: center;
    position: absolute;
    bottom: 2vh;
    width: 18vh;
    margin-left: 2vh;
}

</style>

<script>
document.getElementById("trigger").classList.add("drawn");
setTimeout(function(){
    document.getElementById("trigger").classList.remove("drawn");
    document.getElementById("komunikat").style.visibility = "hidden";
},3000)
</script>

document.getElementById（“触发器”）.classList.add（“绘制”）；
setTimeout（函数（）{
document.getElementById（“触发器”）.classList.remove（“绘制”）；
document.getElementById（“komunikat”）.style.visibility=“hidden”；
},3000)

问题似乎在于您：

document.getElementById("komunikat").style.visibility = "hidden";

但您从未将其设置回

“可见”

要演示：

document.getElementById（'click'）.addEventListener（'click'，function（）{
document.getElementById（“触发器”）.classList.add（“绘制”）；
document.getElementById（“komunikat”）.style.visibility=“visible”；
setTimeout（函数（）{
document.getElementById（“触发器”）.classList.remove（“绘制”）；
document.getElementById（“komunikat”）.style.visibility=“hidden”；
},3000)
});
.circ{
不透明度：0；
行程：130；
行程偏移：130；
-webkit转换：所有2；
-moz转换：所有2s；
-ms转换：全部2秒；
-o-过渡：所有2s；
过渡：所有2；
}
.滴答声{
行程：50；
行程偏移：50；
-webkit过渡：行程缓冲1s放松；
-moz转换：冲程偏移2s 1s缓解；
-ms转换：行程偏移2s 1s缓解；
-o型转换：行程偏移2s 1s缓解；
过渡：行程偏移2s 1s缓解；
}
.draw+svg.path{
不透明度：1；
笔划偏移：0；
}
#滴答声1{
左：2vh；
高度：18vh；
宽度：18vh；
}
#共青团{
颜色：白色；
边界半径：20px；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：22vh；
宽度：22vh；
显示：块；
填充：25px；
背景色：rgba（255255,0.2）；
}
#特克斯特{
字号：2vh；
线高：2vh；
文本对齐：居中；
位置：绝对位置；
底部：2vh；
宽度：18vh；
左边距：2vh；
}

乌尔兹涅-维波区
单击我
可能我没有澄清。查询结束后，将设置$\u会话变量，页面将重定向到自身。然后页面检查变量是否已设置，根据其值，它需要上述PHP文件并取消设置PHP变量。所以让它再次可见不应该是一件事。您在哪里包含JavaScript？听起来你需要在js运行之前等待页面加载，试着在
文档中包装你的代码。addEventListener（“DOMContentLoaded”，函数（事件）{
很遗憾它没有帮助所有这些（CSS、js和HTML）都是一个PHP文件，如果有关系的话