如何繞過css過渡效果，使用JavaScript？

我想創建一個 CSS 過渡，重要的是，每次呼叫我的函式時，我都可以提前“重置”我的“框”的寬度。

只需將框的寬度設定為零，元素就會隨著影片而縮小。但我想在沒有影片的情況下重置。所以我創建了一個在重置前后禁用和啟用效果的類。不幸的是，這不起作用。我猜是因為 JavaScript 是異步的，它只是飛過 width=0 命令。我發現，如果我在洗掉“notransition”之前用警報中斷運行時，它會起作用，但這當然不是一種有效的方法。

我一直想為這個異步問題找到一個解決方案。我會很高興為我的嘗試提供解釋和解決方案，也許還有更好的重置解決方案。謝謝！

function test() {

            var duration = 5;

            document.getElementById("box").classList.add('notransition');
            document.getElementById("box").style.width = 0   "%"
            document.getElementById("box").classList.remove('notransition');

            //Fill progress bar
            document.getElementById("box").style.setProperty('transition-duration', duration   's');
            document.getElementById("box").style.width = 100   "%"

            setTimeout(function () {
                console.log("Progress finished")
            }, duration * 1000);

        }

    * {
        box-sizing: border-box;
    }

    html {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    body {
        margin: 0;
        width: 100%;
        padding: 20px;
    }

    #box {
        border: 1px solid red;
        height: 20px;
        width: 10%;
        background-color: rgba(219, 72, 72, 0.3);
        transition-property: width;
        transition-duration: 0s;
        transition-timing-function: linear;
    }

    .notransition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

<div id="box" onclick="test()"></div>

uj5u.com熱心網友回復：

使用兩個類來切換，特別是對于transition-delay屬性，它作業得很好。在影片開始之前，您還必須允許一個小的延遲將其恢復到 10%。

function test() {

  // "normal" transition delay is zero seconds
  let box = document.getElementById("box");
  box.style.width = "10%";

  // Allow a small delay (10ms) for the width to update on screen
  setTimeout(function() {

    // Change the transition delay and the width
    box.classList.remove('normal');
    box.classList.add('transitionning');
    box.style.width = "100%";

    // When completed, restore the "normal" transition delay
    setTimeout(function() {
      console.log("Progress finished")
      box.classList.remove('transitionning');
      box.classList.add('normal');
    }, 5000);
  }, 10)
}

* {
  box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
  width: 100%;
}

body {
  margin: 0;
  width: 100%;
  padding: 20px;
}

#box {
  border: 1px solid red;
  height: 20px;
  width: 10%;
  background-color: rgba(219, 72, 72, 0.3);
  transition-property: width;
  transition-timing-function: linear;
}

.normal {
  transition-duration: 0s;
}

.transitionning {
  transition-duration: 5s;
}

<div id="box" class="normal" onclick="test()"></div>

uj5u.com熱心網友回復：

也許使用 setTimeout()設定時間為零讓JS首先執行width:0%然后運行animation？

function test() {

            var duration = 5;
            document.getElementById("box").classList.add('notransition');
            document.getElementById("box").style.width = 0   "%"
            document.getElementById("box").classList.remove('notransition');

            setTimeout(function(){
            document.getElementById("box").style.setProperty('transition-duration', duration   's');
            document.getElementById("box").style.width = 100   "%"

            setTimeout(function () {
                console.log("Progress finished")
            }, duration * 1000);
            
            },0)

        }

* {
        box-sizing: border-box;
    }

    html {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    body {
        margin: 0;
        width: 100%;
        padding: 20px;
    }

    #box {
        border: 1px solid red;
        height: 20px;
        width: 10%;
        background-color: rgba(219, 72, 72, 0.3);
        transition-property: width;
        transition-duration: 0s;
        transition-timing-function: linear;
    }

    .notransition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

<div id="box" onclick="test()"></div>

標籤：

上一篇：.NET中大型專案開發必備(12)--使用MQ訊息佇列

下一篇：如果有未捕獲的錯誤，有什么方法可以導致promise被拒絕？