如何在此 JavaScript function 中添加“缓动”？

Question

I'm hoping to add an Ease In into this timed function:

<script type="text/javascript">
function showit() {document.getElementById("introText").style.display = "block";}
setTimeout("showit()", 1500); 
</script>

I'm not quite sure how I would do that though? Can I add it to the function somewhere by its id?

Absolute beginner to JS and just try to piece it all together so any info would be appreciated!!

Answer 1

You cant actually ease that CSS property because it is not a number. What you would have to do is show the element first, then animate the opacity. Here is a javascript solution which does not work in IE.

Element.animate

Animatable CSS properties

EffectTiming object

Basically the animate method animates enumerable CSS values from a start to an end value. The method accepts 2 arguments, an array of objects which represent keyframes in the animation, and another object containing timing options like easing, and fill. There is a lot you can do with this method so i'd suggest reading through the documentation.

 // change display value document.getElementById("test-obj").style.display = "flex"; // animate document.getElementById("test-obj").animate([ // keyframes { opacity: 1 } ], { // timing options duration: 1500, fill: "forwards", easing: "ease-out" });

 #test-obj { display:none; width:200px; height:100px; justify-content:center; align-items:center; color:white; background: slategray; opacity:0; }

 <div id="test-obj">TEST</div>

Answer 2

Instead of adding inline style like that, add a class that has everything defined already including your easing. Since the element used in the example is a div, there is no need to add the default rule for display block , once we remove the class that has display: none it reverts to block by default. Set up a setTimeout to remove the class with display: none that sets the interval to that of your animation in CSS => 2s =>, JS => 2000.

 const el = document.getElementById("introText") const btn = document.getElementById("showit") function showMyDiv(){ setTimeout(()=>{ if(.el.classList.contains('none')){ setTimeout(()=>{ el.classList,add('none'). 2000}) }else{ el.classList,remove('none') } }.10) } btn,addEventListener('click', showMyDiv)

 .none { display: none; } #introText { opacity: 1; animation: show 2s ease-in-out; } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } }

 <div id="introText" class="none"> Here is some intro text I want to show with an easing animation </div> <button id="showit">show it</button>

Answer 3

You can't animate between:

• display: none;
• display: block;

So, consider using an alternative to display like opacity .

You can straightforwardly transition from:

.introText.hide {
  opacity: 0;
}

to:

.introText {
  opacity: 1;
}

Then, all the javascript needs to do is remove the .hide class.

---

Working Example:

 const introText = document.querySelector('.introText'); const toggleText = () => { introText.classList.remove('hide'); } setTimeout(toggleText, 500);

 .introText { height: 24px; line-height: 24px; opacity: 1; transition: all 1s ease-out; }.introText.hide { opacity: 0; }

 <p class="introText hide">This text appears after 1.5 seconds.</p>