Issue
I made animations for text to show and hide, but I don't know how to make it work correctly. Please help.ㅤㅤㅤㅤㅤ
My English is bad, so this is written by a google translatorㅤㅤㅤㅤㅤㅤㅤㅤ
I want that when a button is pressed, a specific text with animation is shown, and another is hiding, and also when the “hide” button is pressed, the text is hiding, also with animation. The problem is that the text hiding without animation, I just don’t know how to attach it.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
function hide(Id) {
document.getElementById(Id).style.display = "none";
}
function show(Id) {
document.getElementById(Id).style.display = "block";
}
p {text-align: center;
}
@keyframes text-fade-in {
0% {
opacity: 0;
transform: translateX(-10vw);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(0vw);
}
}
.text-fade-in {
opacity: 0;
animation-name: text-fade-in;
animation-delay: 0.4s;
animation-duration: 0.4s;
animation-timing-function: easeOutCirc;
animation-fill-mode: forwards;
}
@keyframes text-fade-out {
0% {
opacity: 1;
transform: translateX(0vw);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-10vw);
}
}
.text-fade-out {
opacity: 1;
animation-name: text-fade-out;
animation-delay: 0.4s;
animation-duration: 0.4s;
animation-timing-function: easeOutCirc;
animation-fill-mode: forwards;
}
<button onclick="show('Text1'); hide('Text2'); hide('Text3')">Text1</button>
<button onclick="show('Text2'); hide('Text1'); hide('Text3')">Text2</button>
<button onclick="show('Text3'); hide('Text1'); hide('Text2')">Text3</button>
<button onclick="hide('Text1'); hide('Text2'); hide('Text3')">Hide </button>
<p class="text-fade-in" id="Text1" style="display:none">Text1</p>
<p class="text-fade-in" id="Text2" style="display:none">Text2</p>
<p class="text-fade-in" id="Text3" style="display:none">Text3</p>
Solution
I think you are talking about this functionality.
Just check it and tell me your thought
I am also adding a codepen
let p = document.querySelectorAll("p");
for (let i = 0; i < p.length; i++) {
p[i].addEventListener("animationend", function () {
if (
p[i].style.display !== "none" &&
[...p[i].classList].includes("text-fade-out")
) {
p[i].style.display = "none";
}
});
}
let isClearTimeout = false;
function show(Id) {
let ce = document.getElementById(Id);
let ad = 0;
if(ce.style.display !== 'none') return;
Array.from(p).forEach((el) => {
if (el.style.display !== "none") {
hide();
ad = parseFloat(window.getComputedStyle(el).animationDuration) * 1000;
}
});
if(isClearTimeout){
clearTimeout(isClearTimeout)
}
isClearTimeout = setTimeout(() => {
if (ce.style.display === "none") {
ce.classList.remove("text-fade-out");
ce.style.display = "block";
ce.classList.add("text-fade-in");
}
}, ad);
}
function hide() {
// let ce = document.getElementById(Id);
Array.from(p).forEach((ce)=>{
if (ce.style.display === "block") {
ce.classList.remove("text-fade-in");
ce.classList.add("text-fade-out");
}
})
}
@keyframes text-fade-in {
0% {
opacity: 0;
transform: translateX(-10vw);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(0vw);
}
}
.text-fade-in {
opacity: 0;
animation-name: text-fade-in;
/* animation-delay: 0.4s; */
animation-duration: 0.4s;
animation-timing-function: easeOutCirc;
animation-fill-mode: forwards;
}
@keyframes text-fade-out {
0% {
opacity: 1;
transform: translateX(0vw);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-10vw);
}
}
.text-fade-out {
opacity: 1;
animation-name: text-fade-out;
/* animation-delay: 0.4s; */
animation-duration: 0.4s;
animation-timing-function: easeOutCirc;
animation-fill-mode: forwards;
}
<body>
<button onclick="show('Text1')">Text1</button>
<button onclick="show('Text2')">Text2</button>
<button onclick="show('Text3')">Text3</button>
<button onclick="hide()">Hide all</button>
<p class="text-fade-in" id="Text1" style="display:none" >Text1</p>
<p class="text-fade-in" id="Text2" style="display:none" >Text2</p>
<p class="text-fade-in" id="Text3" style="display:none" >Text3</p>
</body>
Answered By - Rakesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.