transition being bumpy

7 Replies

Dev_HKOP•2mo ago

i want the transition to happen smoothly just like it is in the second part

Dev_HKOP•2mo ago

https://pastecord.com/iwahoninox.typescript here's the full snippet

You can use a details tag to achieve the reveal behaviour without all the js (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) you can then transition the height. You can’t do this by default, you have to use interpolate-size (https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#) to allow for this. The only downside is this hasn’t got great support yet, so the transition would most likely have to be done using a js library

MDN Web Docs

: The Details disclosure element - HTML: HyperText Markup Language ...

The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.

MDN Web Docs

interpolate-size - CSS: Cascading Style Sheets | MDN

The interpolate-size CSS property allows you to enable animations and transitions between a value and an intrinsic size value such as auto, fit-content, or max-content.

Dev_HKOP•2mo ago

i still wanna animate it via js, if it's possible, if checked, i toggle the paragraph to be animated, else it stays shut

ἔρως•2mo ago

please, don't if you do, don't use setInterval that's the worst thing you can do also, you're running the setInterval at 10ms, and you try to do everything within those 10ms which means, you're aiming for 100fps, but browsers don't always render at 100fps you will be lucky if you get 60fps, which is 1000/60 milliseconds if you really really want to animate with javascript, at least use requestAnimationFrame

Dev_HKOP•2mo ago

const toggleQuestions = document.getElementsByClassName('toggle-question')
const answeredQuestions = document.getElementsByClassName('answered-question')

for(let el of toggleQuestions){
    let icon = el.childNodes[3]
    let paragraph=icon.parentNode.nextElementSibling.children[0]
    let isChecked=false
    function animate(){
        // animate icon
        // animate the height of element
        animateIcon()
        animateHeight()
    }
    function animateIcon(){
        const animationT=parseInt(icon.getAttribute('data-animated-ms'))
        let ms = animationT;
        let id = setInterval(iconAnimate,10)
        function iconAnimate(){
            if(ms==0){
                // this to clear the interval
                isChecked=!isChecked
                icon.style.opacity=null
                // the
                clearInterval(id)
            }
            const halfMs=animationT/2; // half-time
            if(!icon.style.opacity){
                // sets opacity once
                icon.style.opacity=`${animationT/100}`
            }else if(ms>=halfMs){
                icon.style.opacity=`${parseFloat(icon.style.opacity) - (animationT/100)/10}`;
            }else{
                isChecked?icon.textContent='+':icon.textContent='-'
                icon.style.opacity=`${parseFloat(icon.style.opacity) + (animationT/100)/10}`;
            }
            const tick=5
            ms=ms-tick
        }
    }
    function animateHeight(){

        const height=paragraph.offsetHeight
        console.log(paragraph.parentElement)
        paragraph.parentElement.classList.toggle('show-more')
    }
    el.addEventListener('click',function(){
        /*
         * animation part
         * */
        animate()
    })
}

const toggleQuestions = document.getElementsByClassName('toggle-question')
const answeredQuestions = document.getElementsByClassName('answered-question')

for(let el of toggleQuestions){
    let icon = el.childNodes[3]
    let paragraph=icon.parentNode.nextElementSibling.children[0]
    let isChecked=false
    function animate(){
        // animate icon
        // animate the height of element
        animateIcon()
        animateHeight()
    }
    function animateIcon(){
        const animationT=parseInt(icon.getAttribute('data-animated-ms'))
        let ms = animationT;
        let id = setInterval(iconAnimate,10)
        function iconAnimate(){
            if(ms==0){
                // this to clear the interval
                isChecked=!isChecked
                icon.style.opacity=null
                // the
                clearInterval(id)
            }
            const halfMs=animationT/2; // half-time
            if(!icon.style.opacity){
                // sets opacity once
                icon.style.opacity=`${animationT/100}`
            }else if(ms>=halfMs){
                icon.style.opacity=`${parseFloat(icon.style.opacity) - (animationT/100)/10}`;
            }else{
                isChecked?icon.textContent='+':icon.textContent='-'
                icon.style.opacity=`${parseFloat(icon.style.opacity) + (animationT/100)/10}`;
            }
            const tick=5
            ms=ms-tick
        }
    }
    function animateHeight(){

        const height=paragraph.offsetHeight
        console.log(paragraph.parentElement)
        paragraph.parentElement.classList.toggle('show-more')
    }
    el.addEventListener('click',function(){
        /*
         * animation part
         * */
        animate()
    })
}

how to use that requestAnimationFrame

ἔρως•2mo ago

you call requestAnimationFrame and it runs the function the examples in mdn show it

Gaming

Programming

transition being bumpy