docs: follow tinygesture recommendation for longpress without tap

Author: hperrin

packages/site/src/routes/demo/common/_UseActionsPannable.ts

@@ -27,7 +27,7 @@ export default function Pannable(node: HTMLElement) {
 
   node.style.transition =
     (node.style.transition ? node.style.transition + ', ' : '') +
-    'opacity ease .3s';
+    'opacity .3s ease';
 
   node.addEventListener('touchstart', preventDefault, { passive: false });
 

packages/site/src/routes/demo/common/_UseActionsSwipeable.ts

@@ -9,7 +9,7 @@ export default function Swipeable(node: HTMLElement) {
 
   node.style.transition =
     (node.style.transition ? node.style.transition + ', ' : '') +
-    'transform ease 0.3s';
+    'transform .3s ease';
 
   node.addEventListener('touchstart', preventDefault, { passive: false });
 

packages/site/src/routes/demo/common/_UseActionsTappable.ts

@@ -14,15 +14,15 @@ export default function Tappable(
 
   node.style.transition =
     (node.style.transition ? node.style.transition + ', ' : '') +
-    'background-color ease 0.3s, color ease 0.3s';
+    'background-color .3s ease, color .3s ease';
 
   gesture.on('tap', () => {
-    if (!pressed) {
-      node.style.transform = 'perspective(1000px) translate3d(0, 0, 100px)';
-      clearTimeout(tapTimeout);
-      tapTimeout = setTimeout(() => (node.style.transform = ''), 300);
+    if (pressed) {
+      return;
     }
-    pressed = false;
+    node.style.transform = 'perspective(1000px) translate3d(0, 0, 100px)';
+    clearTimeout(tapTimeout);
+    tapTimeout = setTimeout(() => (node.style.transform = ''), 300);
   });
   gesture.on('doubletap', () => {
     node.style.transform = 'perspective(1000px) translate3d(0, 0, 400px)';
@@ -37,10 +37,16 @@ export default function Tappable(
   });
 
   gesture.on('panend', () => {
-    pressTimeout = setTimeout(() => {
-      node.style.backgroundColor = '';
-      node.style.color = '';
-    }, 300);
+    if (pressed) {
+      pressTimeout = setTimeout(() => {
+        node.style.backgroundColor = '';
+        node.style.color = '';
+      }, 300);
+
+      setTimeout(() => {
+        pressed = false;
+      }, 0);
+    }
   });
 
   return {