我如何让我的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:删除了Psuedo转换。

​

$("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>

​