NativeScript/CSSを使用してGridLayoutをオフスクリーンに配置するにはどうすればよいですか？

Question

GridLayoutの開始位置をオフスクリーンに設定するにはどうすればよいですか？私がそれをクリックすると、私はビューに持ってくるキーフレームをトリガーします。ここに私がしようとしているが、それは動作しません。

これは、HTML

<GridLayout columns="*" rows="auto,*" class="test-control" "> 
    <Label class="h12 page-text" text="TEST" row="0 "> 
      </Label> 
    <Label class="h1 page-text " text="TEST" row="1 "> 
      </Label> 

これは、CSSです：

 .test-control { 
    position: relative; 
    vertical-align: bottom; 
    background-color: #0E5240; 
    color: #FF0000; 
    height: auto; 
    bottom: -100%; 
    overflow: hidden; 
    } 

は私がkeyframsとアニメーションの作業を持っています。私はGridLayoutをオフスクリーンで起動する必要があります。

Answer 1

画面をオフにするには、translateXまたはtranslateYのプロパティを使用します。私はカスタムサイドメニュー、ボトムシート、フォームなどの多くのアプリでそれを使用します。

Answer 2

私はちょうどこれに関する記事を書いています。それをチェックアウトし、それは場合に役立ちます参照してください。

snackbar.directive.ts

import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; 
import { screen, ScreenMetrics } from 'platform'; 
const screenScale: number = screen.mainScreen.scale; 
const offScreenMargin: number = screen.mainScreen.heightDIPs * -1; 
@Directive({ 
    selector: '[snackbar]' 
}) 
export class SnackbarDirective { 
    // Let an implementor know when the view has left the screen 
    @Output() private dismissed: EventEmitter<boolean> = new EventEmitter<boolean>(false); 
    private element: ElementRef; 
    constructor(el: ElementRef) { 
     this.element = el; 
     this.element.nativeElement.marginBottom = offScreenMargin; 
    } 
    public show(): void { 
      this.element.nativeElement.animate({ 
      translate: { x: 0, y: this.getTranslateYHeight() * -1 }, 
      duration: 750 
     }); 
    } 
    public dismiss(): void { 
     this.element.nativeElement.animate({ 
      translate: { x: 0, y: this.getTranslateYHeight() }, 
      duration: 750 
     }) 
     .then(() => this.dismissed.emit(true)); 
    } 
    private getTranslateYHeight(): number { 
     return this.element.nativeElement.getMeasuredHeight()/screenScale; 
    } 
} 

implementor.component.html

<GridLayout columns="auto,auto" rows="auto,auto"> 
    <!-- My Component Page Markup --> 
    <Button (tap)="onOpenButtonTap($event)" 
      text="Open" row="0" col="0"></Button> 
    <Button (tap)="onCloseButtonTap($event)" 
      text="Close" row="0" col="1"></Button> 
    <StackLayout snackbar class="slide" col="0" colSpan="2" row="1"> 
    </StackLayout> 
</GridLayout> 

implementor.component：https://medium.com/@scottmgerstl/slide-a-view-in-from-off-screen-nativescript-angular-8e305f50217a

ここで添付コードです.ts

import { Component, ViewChild } from '@angular/core'; 
import { SnackbarDirective } from './snackbar.directive'; 
@Component(...) 
export class ImplementorComponent { 
    @ViewChild(SnackbarDirective) private snack: SnackbarDirective; 
    private onOpenButtonTap(): void { 
     this.snack.show(); 
    } 
    private onCloseButtonTap(): void { 
     this.snack.dismiss(); 
    } 
} 

起こっていただきました！ここにあります：

ブラケット表記を使用してディレクティブセレクターで[スナックバー]あなたの代わりに他のビューの中にそれらをネストの要素に（部品を含む）ディレクティブを添付することができます（ブログ記事で説明上記の通り）。ディレクティブのメソッドにアクセスするには、angle core @ ViewChild（SnackbarComponent）のViewChildデコレータを使用して、実装コンポーネントで型を参照します。同じタイプのビューに複数のディレクティブを追加する場合は、代わりに@ViewChildren（）デコレータを使用し、必要なものを見つけるためにiterateを繰り返す必要があることに注意してください。