Creating or picking transition?

[omar2205]

I have this simple md-dialog, how to pick what transition it uses?

<script type="module">
  import 'https://esm.run/@material/[email protected]/all.js'
</script>

<md-outlined-button class="btn">Back</md-outlined-button>

<md-dialog class="da" fade>
  <div slot="headline">
    Dialog title
  </div>
  <form slot="content" id="form-id" method="dialog">
    A simple dialog with free-form content.
  </form>
  <div slot="actions">
    <md-text-button form="form-id">Ok</md-text-button>
  </div>
</md-dialog>

It doesn't say much here

[asyncLiz]

You can customize the transition by overriding those functions and returning your own animation keyframes to change any aspect of the animations.

There's a default open/close animation object that you can reference for the options available.

Each part of the dialog (like the dialog itself, the scrim, or the content) can be given one or more animations, represented as an array of Element.animate() arguments.

const dialog = document.querySelector('md-dialog');
dialog.getOpenAnimation = () => {
  // A simpler and faster fade-in animation
  return {
    // An array of one or more animations
    dialog: [
      // A single simple fade-in animation
      [
        // args for Element.animate(keyframes, options);
        [{'opacity': '0'}, {'opacity': '1'}],
        {duration: 250, easing: 'ease-in-out'},
      ]
    ],
    scrim: [
      // Same fade-in for the scrim
      [
        [{'opacity': '0'}, {'opacity': '0.32'}],
        {duration: 250, easing: 'ease-in-out'},
      ]
    ],
  };
};

[omar2205]

I tried and it didn't work https://codepen.io/omar2205/pen/yLrEmye

+ Was hoping a section about on https://material-web.dev/

[asyncLiz]

It looks like the property is being set too early before the element is registered. Try waiting for the element to register:

customElements.whenDefined('md-dialog').then(() => {
  const about_dialog = document.querySelector('.about');
  about_dialog.getOpenAnimation = ...;
});

This is needed when the scripts that modify the element run before the script that imports the element.

[omar2205]

That worked, thanks!