如何使用Javascript重置样式属性

使用JavaScript运行div元素的transition属性（使用

class=“quote”

）后，该元素在后续运行中无法重置为其原始位置。我尝试过使用

document.querySelector（“.quoteTransition”）.style.removeProperty（“transition”）用于JavaScript和
$（“.quoteTransition”）.css（“transition”，”），用于jQuery撤消转换和转换属性。这两种方法似乎都有效，但在它们被移除之前，它们所期望的过渡效果并没有显现出来。我怎样才能纠正这个问题？
下面是一些示例和片段请在320像素宽的屏幕上查看转换

HTML代码

<div class="preNavBar maxWidth-600" id="maxWidth-600">
        <div class="quote" id="quote">Quote 1: A person who won't read has no advantage over one who can't read. A person who won't read has no advantage.<span class="quoteAuthor" id="quoteAuthor">&#8212; Mark Twain</span></div>
        <div class="quote" id="quote">Quote 2: No matter how tough things are, never give up trying to save another life. Think on this thing.<span class="quoteAuthor" id="quoteAuthor">&#8212; Bright Jovanny</span></div>
    </div>

JavaScript代码

        var i;
        var quote = document.getElementsByClassName("quote");
        const quoteTimeout_default = 5000;  //set timeout to 5seconds
        const quoteTransitionDelay = 2;         //delay transition for 2seconds
        var quoteClientHeight;
        var quoteScrollHeight;
        var searchBox = document.getElementById("searchBox");
        var searchClose = document.getElementById("searchClose");

        showQuote();
        function showQuote() {
            for (i = 0; i < quote.length; i++) {
                quote[i].style.display = "none";
            }

            let min = 0;
            let max = quote.length - 1;
            let randNum = Math.floor(Math.random() * (max - min + 1)) + min;

            quote[randNum].style.display = "inline-block";

            quoteClientHeight = quote[randNum].clientHeight;
            quoteScrollHeight = quote[randNum].scrollHeight;


            if (quoteScrollHeight > quoteClientHeight) {

                quoteTimeout = quoteTimeout_default + (quoteScrollHeight - quoteClientHeight) * 0.05 * quoteTimeout_default;
                //Adding the transition class to the quote element
                document.getElementsByClassName("quote")[randNum].classList.add("quoteTransition");
               //Defining transform and transition to the quote element
                document.querySelector(".quoteTransition").style.transform = "translateY(" + -(quoteScrollHeight - quoteClientHeight) + "px";
                document.querySelector(".quoteTransition").style.transition = "transform " + (quoteTimeout / 1000 - quoteTransitionDelay) + "s " + "linear " + quoteTransitionDelay + "s";
              // Remove style property to reset element
              //document.querySelector(".quoteTransition").style.removeProperty("transform");
                //document.querySelector(".quoteTransition").style.removeProperty("transition");
                /* $(".quoteTransition").css("transform", "");
                $(".quoteTransition").css("transition", ""); */

            } else {
                quoteTimeout = quoteTimeout_default;
            }

            setTimeout(showQuote, quoteTimeout);

            document.getElementById("clientHeight").innerHTML = "Client Height: " + quoteClientHeight + " px";
            document.getElementById("scrollHeight").innerHTML = "Scroll Height: " + quoteScrollHeight + " px";
            document.getElementById("timeout").innerHTML = "Time-out: " + quoteTimeout / 1000 + " sec";
        }

vari；
var quote=document.getElementsByClassName（“quote”）；
const quoteTimeout_默认值=5000//将超时设置为5秒
常数quoteTransitionDelay=2//延迟转换2秒
var商高度；
var quoteScrollHeight；
var searchBox=document.getElementById（“searchBox”）；
var searchClose=document.getElementById（“searchClose”）；
showQuote（）；
函数showQuote（）{
对于（i=0；iquoteClientHeight）{
quoteTimeout=quoteTimeout_默认值+（quoteScrollHeight-quoteClientHeight）*0.05*quoteTimeout_默认值；
//将转换类添加到quote元素
document.getElementsByClassName（“quote”）[randNum].classList.add（“quoteTransition”）；
//定义到quote元素的变换和转换
document.querySelector（“.quoteTransition”）.style.transform=“translateY”（+-（quoteScrollHeight-quoteClientHeight）+“px”；
document.querySelector（“.quoteTransition”）.style.transition=“transform”+（quoteTimeout/1000-quoteTransitionDelay）+“s”+“linear”+quoteTransitionDelay+“s”；
//删除样式属性以重置元素
//document.querySelector（“.quoteTransition”）.style.removeProperty（“transform”）；
//document.querySelector（“.quoteTransition”）.style.removeProperty（“transition”）；
/*$（“.quoteTransition”）.css（“转换”，“转换”）；
$（“.quoteTransition”）.css（“transition”，”）*/
}否则{
quoteTimeout=quoteTimeout_默认值；
}
设置超时（showQuote、quoteTimeout）；
document.getElementById（“clientHeight”）.innerHTML=“客户端高度：”+quoteClientHeight+“px”；
document.getElementById（“scrollHeight”）.innerHTML=“滚动高度：”+quoteScrollHeight+“px”；
document.getElementById（“timeout”）.innerHTML=“超时：”+quoteTimeout/1000+“秒”；
}

        var i;
        var quote = document.getElementsByClassName("quote");
        const quoteTimeout_default = 5000;  //set timeout to 5seconds
        const quoteTransitionDelay = 2;         //delay transition for 2seconds
        var quoteClientHeight;
        var quoteScrollHeight;
        var searchBox = document.getElementById("searchBox");
        var searchClose = document.getElementById("searchClose");

        showQuote();
        function showQuote() {
            for (i = 0; i < quote.length; i++) {
                quote[i].style.display = "none";
            }

            let min = 0;
            let max = quote.length - 1;
            let randNum = Math.floor(Math.random() * (max - min + 1)) + min;

            quote[randNum].style.display = "inline-block";

            quoteClientHeight = quote[randNum].clientHeight;
            quoteScrollHeight = quote[randNum].scrollHeight;


            if (quoteScrollHeight > quoteClientHeight) {

                quoteTimeout = quoteTimeout_default + (quoteScrollHeight - quoteClientHeight) * 0.05 * quoteTimeout_default;
                //Adding the transition class to the quote element
                document.getElementsByClassName("quote")[randNum].classList.add("quoteTransition");
               //Defining transform and transition to the quote element
                document.querySelector(".quoteTransition").style.transform = "translateY(" + -(quoteScrollHeight - quoteClientHeight) + "px";
                document.querySelector(".quoteTransition").style.transition = "transform " + (quoteTimeout / 1000 - quoteTransitionDelay) + "s " + "linear " + quoteTransitionDelay + "s";
              // Remove style property to reset element
              //document.querySelector(".quoteTransition").style.removeProperty("transform");
                //document.querySelector(".quoteTransition").style.removeProperty("transition");
                /* $(".quoteTransition").css("transform", "");
                $(".quoteTransition").css("transition", ""); */

            } else {
                quoteTimeout = quoteTimeout_default;
            }

            setTimeout(showQuote, quoteTimeout);

            document.getElementById("clientHeight").innerHTML = "Client Height: " + quoteClientHeight + " px";
            document.getElementById("scrollHeight").innerHTML = "Scroll Height: " + quoteScrollHeight + " px";
            document.getElementById("timeout").innerHTML = "Time-out: " + quoteTimeout / 1000 + " sec";
        }