如何触发我的 transitionend 事件？

Question

我正在了解 <progress> 元素并尝试创建一个 CSS 过渡以使其在值增加时看起来更平滑。我想在 transitionend 事件触发后执行 JS，但它不会。

我做错了什么？

$("button").on("click", function () {
    $("progress").val(100);
});

$("progress[value]").on(
    "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function () {
        $("progress").val(0);
        alert("Completed");
    }
);

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

button {
    margin: 10px;
    text-transform: uppercase;
    font-size: 1em;
}

.loadPageProgress progress {
    display: block;
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: green;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.loadPageProgress progress[value] {
    background-color: green;
    transition: all 1000ms ease-in-out;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
}

.loadPageProgress progress[value]::-webkit-progress-bar {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: grey;
}

.loadPageProgress progress[value]::-webkit-progress-value {
    background-color: green;
    transition: all 1000ms ease-in-out;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
}

.loadPageProgress progress[value]::-moz-progress-bar {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loadPageProgress">
    <progress value="0" max="100"></progress>
</div>

<button>start transition</button>

Answer 1

.val(x) 实际上不会在进度元素上触发转换。它立即更新。您看到的过渡是在伪元素 ::-webkit-progress-value 上，据我所知似乎无法使用 jQuery 作为目标，因为它不是 DOM.

的一部分

如果我从你的伪元素 CSS 中删除过渡，你就可以看到这一点。它不再有过渡，只是即时更新进度。

相反，您可以使用 .animate 或类似的东西来更新您的进度并获得完成甚至步骤回调。请参阅代码片段 #2 以了解其实现。

代码段 1：已删除伪过渡。

$("button").on("click", function () {
    $("progress").val(100);
});

$("progress[value]").on(
    "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function () {
        $("progress").val(0);
        alert("Completed");
    }
);

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

button {
    margin: 10px;
    text-transform: uppercase;
    font-size: 1em;
}

.loadPageProgress progress {
    display: block;
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: green;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.loadPageProgress progress[value] {
    background-color: green;
    transition: all 1000ms ease-in-out;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
}

.loadPageProgress progress[value]::-webkit-progress-bar {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: grey;
}

.loadPageProgress progress[value]::-webkit-progress-value {
    background-color: green;
}

.loadPageProgress progress[value]::-moz-progress-bar {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loadPageProgress">
    <progress value="0" max="100"></progress>
</div>

<button>start transition</button>

片段 2：动画

$("button").on("click", function () {
    $("progress").animate({value:100},{
      duration:2000,
      step: function(x){
        
      },
      complete: function(){
        console.log("Done!");
      }
    });
});

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

button {
    margin: 10px;
    text-transform: uppercase;
    font-size: 1em;
}

.loadPageProgress progress {
    display: block;
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: green;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.loadPageProgress progress[value] {
    background-color: green;
    transition: all 1000ms ease-in-out;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
}

.loadPageProgress progress[value]::-webkit-progress-bar {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: grey;
}

.loadPageProgress progress[value]::-webkit-progress-value {
    background-color: green;
}

.loadPageProgress progress[value]::-moz-progress-bar {
    width: 100%;
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loadPageProgress">
    <progress value="0" max="100"></progress>
</div>

<button>start transition</button>

如何触发我的 transitionend 事件？

How do I get my transitionend event to fire?

html

javascript

css

jquery

css-transitions

代码段 1：已删除伪过渡。

片段 2：动画