Merge pull request #122 from jtormalm/master
Add animation on skipButton entry and exit
This commit is contained in:
commit
edd4652d8a
@ -76,6 +76,7 @@ introSkipper.injectCss = function () {
|
|||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
box-shadow: inset 0 0 0 0 #f9f9f9;
|
box-shadow: inset 0 0 0 0 #f9f9f9;
|
||||||
-webkit-transition: ease-out 0.4s;
|
-webkit-transition: ease-out 0.4s;
|
||||||
-moz-transition: ease-out 0.4s;
|
-moz-transition: ease-out 0.4s;
|
||||||
@ -177,7 +178,12 @@ introSkipper.videoPositionChanged = function () {
|
|||||||
const segment = introSkipper.getCurrentSegment(introSkipper.videoPlayer.currentTime);
|
const segment = introSkipper.getCurrentSegment(introSkipper.videoPlayer.currentTime);
|
||||||
switch (segment["SegmentType"]) {
|
switch (segment["SegmentType"]) {
|
||||||
case "None":
|
case "None":
|
||||||
skipButton.classList.add("hide");
|
if (skipButton.style.opacity === '0') return;
|
||||||
|
|
||||||
|
skipButton.style.opacity = '0';
|
||||||
|
skipButton.addEventListener("transitionend", () => {
|
||||||
|
skipButton.classList.add("hide");
|
||||||
|
}, { once: true });
|
||||||
return;
|
return;
|
||||||
case "Introduction":
|
case "Introduction":
|
||||||
skipButton.querySelector("#btnSkipSegmentText").textContent =
|
skipButton.querySelector("#btnSkipSegmentText").textContent =
|
||||||
@ -188,7 +194,14 @@ introSkipper.videoPositionChanged = function () {
|
|||||||
skipButton.dataset["credits_text"];
|
skipButton.dataset["credits_text"];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
if (!skipButton.classList.contains("hide")) return;
|
||||||
|
|
||||||
skipButton.classList.remove("hide");
|
skipButton.classList.remove("hide");
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
skipButton.style.opacity = '1';
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
/** Seeks to the end of the intro. */
|
/** Seeks to the end of the intro. */
|
||||||
introSkipper.doSkip = function (e) {
|
introSkipper.doSkip = function (e) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user