Google Publisher Tag onload event animate div height

by thepio

HTML

<html>

  <head>
    <script type="text/javascript">
      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
      (function() {
        var gads = document.createElement("script");
        gads.async = true;
        gads.type = "text/javascript";
        var useSSL = "https:" == document.location.protocol;
        gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
        var node = document.getElementsByTagName("script")[0];
        node.parentNode.insertBefore(gads, node);
      })();

    </script>
    <script type="text/javascript">
      googletag.cmd.push(function() {
        var adSlot1 = googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [300, 250], "banner1");
        adSlot1.addService(googletag.pubads());
        googletag.pubads().addEventListener('slotRenderEnded', function(event) {
          console.log('Slot has been rendered:');
          var initialDiv = document.getElementById(event.slot.o.o);
          initialDiv.classList.add('loaded');
        });
        googletag.enableServices();
      });

    </script>
    <style>
      .yourDiv {
        min-height: 90px;
        width: 300px;
        background-color: grey;
        max-height: 90px;
        transition: max-height 500ms ease-in;
        overflow: hidden;
      }

      .yourDiv.loaded {
        max-height: 300px;
        transition: max-height 500ms ease-in;
      }
    </style>
  </head>

  <body>
    <div id="banner1" class="yourDiv">
      <script type="text/javascript">
        googletag.cmd.push(function() {
          googletag.display('banner1');
        });
      </script>
    </div>
  </body>

</html>