locked
Using CSS animation to control display of div after loading RRS feed

  • Question

  • User269416624 posted

    I'm new to CSS animation and have a question.  I have a situation where I'm loading a div with html dynamically from the server in response to a user event.  So here's the code that I have to load the div:

    function getDivHtml(element, url, args) {
    
        require(["dojo/request/xhr"], dojo.hitch(this, function (xhr) {
            xhr(url, args).then(
                function (data) {
                    element.innerHTML = data;
                },
                function (errPost) {
                    window.alert(theMessage);
                }
            );
    
        }))
    
    }

    What I want to have happen is, after the div is loaded with the html, I want it to slowly come into view from top to bottom - almost like the height of the div needs to gradually slide from 0% to 100% over the course of a second or so.  I've tried adding an inline style to the div specifying the CSS animation - both at design time and at runtime using javascript - but neither of these is having any effect. 

    So I guess I have two questions:

    Can you do what I'm trying to do via CSS animation, and if so, then how?

    Is the fact that I'm dynamically loading this div at runtime effect the animation?

    Wednesday, October 26, 2016 9:59 PM

All replies

  • User269416624 posted

    OK.  I've found most of the solution.  I simply add the following CSS to my target div:

    style="max-height: 0; overflow: hidden; transition: max-height 0.8s"

    And then, in my javascript, after I load the div with html from the server, I simply set the maxHeight:

    element.style.maxHeight = "350px";

    And this works... but still, I'm wondering if there is a more 'pure' CSS solution - one that leave the javascript alone.

    Any ideas?

    Wednesday, October 26, 2016 10:32 PM
  • User-707554951 posted

    Hi dolot,

    From my understanding, you want to display  a div element dynamically by using CSS animation.

    If that the case, I suggest you could refer to the code below:

     <style type="text/css">
            #main-image{
        height: 0;
        overflow: hidden;
        background:gray;
       -moz-animation: slide 1s ease 3.5s forwards;
       -webkit-animation: slide 1s ease 3.5s forwards;
       -o-animation: slide 1s ease 3.5s forwards;
        animation: slide 1s ease 3.5s forwards;
    }
    @-moz-keyframes slide /* Firefox */
    {
    from {height: 0;}
    to {height: 300px;}
    }
    @-webkit-keyframes slide /* Safari and Chrome */
    {
    from {height: 0;}
    to {height: 300px;}
    }
    
    @-o-keyframes slide /* Opera */
    {
    from {background: red;}
    to {background: yellow;}
    }
    
    @-ms-keyframes slide /* IE10 */
    {
    from {height: 0;}
    to {height: 300px;}
    }
    @keyframes slide
    {
    from {height: 0;}
    to {height: 300px;}
    }
        </style>
    
    <div id="main-image"></div>

    The output screenshots as below:


    Best regards

    Cathy

    Friday, October 28, 2016 2:14 AM