Mock support for Same-Document View Transitions
npm install view-transitions-mockMock support for document.startViewTransition in browsers with no support.
This library mocks document.startViewTransition along with document.activeViewTransition. With the mock installed, you can safely call document.startViewTransition() – and rely on its promises and what not – without it throwing an error in browsers that have no support for it.
This way, you don’t need to sprinkle if (document.startViewTransition) … checks throughout your code.
- Without view-transitions-mock:
``javascript
document.querySelector('button').addEventListener('click', async () => {
if (document.startViewTransition) {
document.querySelector('#thing').style.viewTransitionName = 'the-thing';
const t = document.startViewTransition(updateTheDOM);
await t.finished;
document.querySelector('#thing').style.viewTransitionName = '';
} else {
updateTheDOM();
}
});
- With view-transitions-mock registered:
`javascript`
document.querySelector('button').addEventListener('click', async () => {
document.querySelector('#thing').style.viewTransitionName = 'the-thing';
const t = document.startViewTransition(updateTheDOM);
await t.finished;
document.querySelector('#thing').style.viewTransitionName = '';
});
`bash`
npm i view-transitions-mock
1. Import and register the mock from within a blocking script.
`html`
2. Done.
By default, the registation of view-transitions-mock checks whether document.startViewTransition and View Transition Types are supported or not. When both are supported, it won’t register the mock.
You can tweak the registration by passing an object with the following properties into the register function:
- requireTypes _(Boolean, default value: true)_: Require support for View Transition Types.forced
- _(Boolean, default value: false)_: Force register the mock, regardless of support.
For example, if you are not relying on View Transition Types, call register as follows so that it does not register the mock in Firefox 144–146 which does not have support for View Transition Types:
`javascript`
import { register } from "view-transitions-mock";
register({ requireTypes: false });
Or if you want to disable native support for Same-Document View Transitions entirely – handy if you want to test how your site looks without View Transitions – call register as follows:
`javascript`
import { register } from "view-transitions-mock";
register({ forced: true });
view-transitions-mock is released under the Apache 2.0 License. See the enclosed LICENSE for details.
We'd love to accept your patches and contributions to this project. See the enclosed CONTRIBUTING` for details.
This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.