add animated popup example

josepharhar · josepharhar · commit 9e0421c76e82 · 2022-08-31T17:48:49.000-07:00
diff --git a/source b/source
@@ -81197,6 +81197,25 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
    display:none and other display values is not possible.</p>
   </div>
 
+  <div class="example">
+   <p>The following is an example of an animated pop-up:</p>
+
+   <pre><code class="html">&lt;div popup="auto" id="foo">
+  A fancy pop-up with no Javascript
+&lt;/div>
+&lt;style>
+  [popup] {
+    opacity: 0;
+    transform: translate(-100px,100px);
+    transition: all 1.5s;
+  }
+  [popup]:open {
+    transform: translate(0,0);
+    opacity: 1;
+  }
+&lt;/style></code></pre>
+  </div>
+
   <p>Every element which is not in the <span data-x="attr-popup-none-state">no pop-up state</span>
   has the following members:</p>
   <ul>
@@ -81916,22 +81935,22 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
 
    <pre><code class="html">&lt;div popup=auto id="foo">
   This is a pop-up!
-&lt;div>
+&lt;/div>
 
 &lt;button popupshowtarget="foo">
   Show a pop-up
-&lt;button></code></pre>
+&lt;/button></code></pre>
 
    <p>The following shows how <code data-x="attr-popup-toggle-target">popuptoggletarget</code> can
    open and close a manual pop-up, which can't be closed with light dismiss:</p>
 
    <pre><code class="html">&lt;div popup=manual id="foo">
   This is a pop-up!
-&lt;div>
+&lt;/div>
 
 &lt;button popuptoggletarget="foo">
   Show or hide a pop-up
-&lt;button></code></pre>
+&lt;/button></code></pre>
   </div>
 
   <p>The <span>pop-up target attributes</span> allow certain types of buttons to show and hide
