Applying transition to changing div content

Question

I do hope this question makes sense! I'm working on a site using the code from this answer: https://stackoverflow.com/a/28097928

I'd like to apply a really basic/short fade-in transition so that the changing text doesn't flash as quickly and appears less jarring. How would I do that? How do I know which attribute to apply the transition to?

EDIT: jsfiddle link

This is the basic Javascript in place:

<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>

Any advice would be greatly appreciated!

Thank you!

may be you can apply CSS animation rules along with the change. — Rikin
– Rikin, Commented Jun 10, 2016 at 19:53
You'll likely get a better response if you create a jsfiddle that can be played with. — Mister Epic
– Mister Epic, Commented Jun 10, 2016 at 19:55

Running Buffalo · Accepted Answer · 2016-06-10 20:13:37Z

2

I hope you don't mind I added some CSS.

This will add a fade in transition.

function hover(description) {

            console.log(description);
            document.getElementById('content').className = null;
            setTimeout(function(){
                document.getElementById('content').className = 'transitionedText';
                document.getElementById('content').innerHTML = description;
            },100);
        }

@keyframes textTransition{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    #content{
        color: #000;
        opacity: 0;
    }
    #content.transitionedText{
        animation-name: textTransition;
        animation-duration: 1000ms;
        animation-fill-mode: forwards;
        color: red;
    }

<div id="content">
            Stuff should be placed here.
        </div>
        <br/>
        <br/>
        <br/>
        <ul>
            <li onmouseover="hover('Apples are delicious')">Apple</li>
            <li onmouseover="hover('oranges are healthy')">Orange</li>
            <li onmouseover="hover('Candy is the best')">Candy</li>
        </ul>

answered Jun 10, 2016 at 20:13

Running Buffalo

1,3232 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brianm Over a year ago

Thank you! I don't know a ton about keyframes, so this isn't a solution I would ever have thought of. Much appreciated!

Collectives™ on Stack Overflow

Applying transition to changing div content

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related