x
1
<a target="_blank" class="font-medium underline" href="https://csszero.lazaronixon.com/fruits">Click here to go to the example</a>1
<%= link_to "Click here to go to the example", main_app.fruits_url, target: "_blank", class: "font-medium underline" %>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.auto-animate > * { view-transition-class: auto-animation;}::view-transition-new(.auto-animation):only-child { animation: add-animation 375ms ease-in;}::view-transition-old(.auto-animation):only-child { animation: remove-animation 250ms ease-out;}@keyframes add-animation { 0% { opacity: 0; transform: scale(.98); } 50% { opacity: 0; transform: scale(.98); } 100% { opacity: 1; transform: scale(1); }}@keyframes remove-animation { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.98); }}
Java Script is not required or multiple files are needed, check the notes.