ref(animation): update method (#42)

Author: rdlabo

demo/src/app/index/pages/segment/segment.page.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
+  Gesture,
   IonBackButton,
   IonButton,
   IonButtons,
@@ -16,7 +17,10 @@ import {
   IonSegmentButton,
   IonText,
   IonToolbar,
+  ViewDidEnter,
+  ViewDidLeave,
 } from '@ionic/angular/standalone';
+import { registeredEffect, registerSegmentEffect, registerTabBarEffect } from '../../../../../../src';
 
 @Component({
   selector: 'app-segment',
@@ -42,8 +46,23 @@ import {
     IonButton,
   ],
 })
-export class SegmentPage implements OnInit {
+export class SegmentPage implements OnInit, ViewDidEnter, ViewDidLeave {
+  readonly #el = inject(ElementRef);
+  readonly registeredGestures: registeredEffect[] = [];
   constructor() {}
 
   ngOnInit() {}
+
+  ionViewDidEnter() {
+    this.#el.nativeElement.querySelectorAll('ion-segment').forEach((item: HTMLElement) => {
+      const registerGesture = registerSegmentEffect(item);
+      if (registerGesture) {
+        this.registeredGestures.push(registerGesture);
+      }
+    });
+  }
+
+  ionViewDidLeave() {
+    this.registeredGestures.forEach((gesture) => gesture.destroy());
+  }
 }

demo/src/app/tabs/tabs.page.ts

@@ -4,7 +4,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs';
 
 // import { registerTabBarEffect } from '@rdlabo/ionic-theme-ios26';
-import { registerTabBarEffect } from '../../../../src';
+import { registeredEffect, registerTabBarEffect } from '../../../../src';
 
 @Component({
   selector: 'app-tabs',
@@ -15,7 +15,7 @@ import { registerTabBarEffect } from '../../../../src';
 export class TabsPage implements OnInit, ViewDidEnter, ViewDidLeave {
   readonly #router = inject(Router);
   readonly #el = inject(ElementRef);
-  readonly registeredGestures: Gesture[] = [];
+  readonly registeredGestures: registeredEffect[] = [];
   ngOnInit() {
     this.#router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
       const tabBar = this.#el.nativeElement.querySelector('ion-tab-bar');
@@ -31,9 +31,9 @@ export class TabsPage implements OnInit, ViewDidEnter, ViewDidLeave {
   }
 
   ionViewDidEnter() {
-    const tabBarGesture = registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar')!);
-    if (tabBarGesture) {
-      this.registeredGestures.push();
+    const registerGesture = registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar')!);
+    if (registerGesture) {
+      this.registeredGestures.push(registerGesture);
     }
   }
 

src/components/ion-segment.scss

@@ -27,24 +27,7 @@ ion-segment.ios:not(.ios26-disabled) {
     }
   }
 
-  ion-segment-button {
-    --border-width: 0;
-    --ion-color-base: var(--ion-text-color, #000);
-    --padding-start: 8px;
-    --padding-end: 8px;
-    min-width: 60px;
-    margin: 3px 2px;
-    font-size: 14.5px;
-
-    &::part(indicator-background) {
-      border-radius: 25px;
-      box-shadow: none;
-      transition: background 0.2s ease;
-      background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
-    }
-  }
-
-  &.segment-activated {
+  &:has(ion-segment-button.ion-activated) {
     transform: scale(1.1);
 
     ion-segment-button {
@@ -62,3 +45,38 @@ ion-segment.ios:not(.ios26-disabled) {
     }
   }
 }
+
+ion-segment-button.ios:not(.ios26-disabled) {
+  --border-width: 0;
+  --ion-color-base: var(--ion-text-color, #000);
+  --padding-start: 8px;
+  --padding-end: 8px;
+  min-width: 60px;
+  margin: 3px 2px;
+  font-size: 14.5px;
+
+  &::part(indicator-background) {
+    border-radius: 25px;
+    box-shadow: none;
+    transition: background 0.2s ease;
+    background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+  }
+
+  &.ion-cloned-element {
+    &::part(native) {
+      border-radius: 25px;
+      @include api.glass-background(1, 0, 104%);
+      background: transparent;
+      height: 100%;
+    }
+    color: var(--color-selected, var(--ion-color-primary, #0054e9));
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: -2.5px;
+    transform-origin: center;
+    & > * {
+      visibility: hidden;
+    }
+  }
+}

src/components/ion-tabs.scss

@@ -46,7 +46,7 @@ ion-tab-bar.ios:not(.ios26-disabled) {
   /**
    * effectが有効な場合、effectでスタイリングするため不要
    */
-  &.tab-bar-ios26-effect:has(ion-tab-button.ion-activated) {
+  &.enable-ios26-gesture:has(ion-tab-button.ion-activated) {
     ion-tab-button.tab-selected::part(native) {
       background: rgba(var(--ios26-button-color-selected-rgb), 0);
     }
@@ -101,7 +101,7 @@ ion-tab-button.ios:not(.ios26-disabled) {
 
   &.ion-cloned-element {
     &::part(native) {
-      @include api.glass-background(1, 2px, 104%);
+      @include api.glass-background(1, 0, 104%);
       background: transparent;
     }
     color: var(--color-selected, var(--ion-color-primary, #0054e9));