View transitions prototype

datasette/templates/_facet_results.html

@@ -1,4 +1,4 @@
-<div class="facet-results">
+<div class="facet-results"  style="view-transition-name: facet-results">
     {% for facet_info in sorted_facet_results %}
         <div class="facet-info facet-{{ database|to_css_class }}-{{ table|to_css_class }}-{{ facet_info.name|to_css_class }}" id="facet-{{ facet_info.name|to_css_class }}" data-column="{{ facet_info.name }}">
             <p class="facet-info-name">

datasette/templates/_table.html

@@ -1,7 +1,7 @@
 <!-- above-table-panel is a hook node for plugins to attach to . Displays even if no data available -->
 <div class="above-table-panel"> </div>
 {% if display_rows %}
-<div class="table-wrapper">
+<div class="table-wrapper" style="view-transition-name: table-wrapper">
     <table class="rows-and-columns">
         <thead>
             <tr>

datasette/templates/base.html

@@ -4,6 +4,7 @@
     <title>{% block title %}{% endblock %}</title>
     <link rel="stylesheet" href="{{ urls.static('app.css') }}?{{ app_css_hash }}">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="view-transition" content="same-origin">
 {% for url in extra_css_urls %}
     <link rel="stylesheet" href="{{ url.url }}"{% if url.get("sri") %} integrity="{{ url.sri }}" crossorigin="anonymous"{% endif %}>
 {% endfor %}