New CSS features for smooth entry and exit animations

Joined
Jul 4, 2023
Messages
398
Reaction score
44
In reference to this article: Four new CSS features for smooth entry and exit animations, what do you think about the new css properties?

Especially about these:

an example: [ full code on-line ]
HTML:
<style>
  body {
    background-image: url('https://picsum.photos/id/169/1080/720');
    background-size: cover;
    height: 100vh;
    overflow: hidden;
  }

  dialog {
    display: none;
    opacity: 0;
    translate: 0 -25vh;
    transition-property: overlay transform display opacity;
    transition-duration: 1s;
    transition-behavior: allow-discrete;
    transform: scaleX(0);
  }
  dialog::backdrop {
    background: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2) 1px,
      rgba(0, 0, 0, 0.3) 1px,
      rgba(0, 0, 0, 0.3) 20px
    );
    backdrop-filter: blur(3px);
  }
  dialog[open] {
    display: block;
    translate: 0 0;
    opacity: 1;
    transform: scaleX(1);
  }
  #my-dialog-1 { 
    @starting-style {
      opacity: 0;
      translate: 0 25vh;
      transform: scaleX(0);
    }
  }
  #my-dialog-2 {
    @starting-style {
      opacity: 0;
      translate: 0 -25vh;
      transform: scaleX(0);
    }
  }
  #my-dialog-3 {
    @starting-style {
      opacity: 0;
      transform: scaleX(0);
    }
  }
</style>

<div id="open-dialog-buttons">
  <button id="open-dialog-1">Open Dialog 1</button>
  <button id="open-dialog-2">Open Dialog 2</button>
  <button id="open-dialog-3">Open Dialog 3</button>
</div>


<dialog id="my-dialog-1">
  <h1>Lorem!</h1>
  <p>This is a sample dialog 1.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
<dialog id="my-dialog-2">
  <h1>Lorem!</h1>
  <p>This is a sample dialog 2.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
<dialog id="my-dialog-3">
  <h1>Lorem!</h1>
  <p>This is a sample dialog 3.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
<script>
  const openDialogButtons = document.querySelector('#open-dialog-buttons');

  openDialogButtons.addEventListener('click', (e) => {
    if (e.target.matches('button'))
      document.querySelector(`#${e.target.id.replace('open', 'my')}`).showModal();
  });
</script>


IMO: I can't wait until they are will be fully supported in all major browsers.


Useful links for this topic:

Can I use: [ @starting-style ] [ transition-behavior ] [ dialog ] [ ::backdrop ] [ repeating-linear-gradient ] [ backdrop-filter ]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,820
Messages
2,569,721
Members
45,509
Latest member
Danish324

Latest Threads

Top