如何让我的 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>