Created
February 16, 2022 01:58
-
-
Save RaimonxDev/486ae7a80f0ced172ce3d0bad72afd47 to your computer and use it in GitHub Desktop.
example animation angular y tailwind
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Aplicamos la animacion en el html | |
| <div *ngIf="isOpenMenu" @showMenu class="absolute z-50 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"> | |
| <div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"> | |
| <div class="px-5 pt-4 flex items-center justify-between"> | |
| <div class="-mr-2"> | |
| <button (click)="toogleOpen()" type="button" class="rounded-md p-2 inline-flex items-center justify-center text-indigo-400 hover:text-indigo-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> | |
| <span class="sr-only">Close main menu</span> | |
| <!-- Heroicon name: x --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div role="menu" aria-orientation="vertical" aria-labelledby="main-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1" role="none"> | |
| <a [routerLink]="['/home']" routerLinkActive="link-active" href="#" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-400 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Inicio</a> | |
| <a [routerLink]="['/blog']" routerLinkActive="link-active" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-400 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Blog</a> | |
| <a [routerLink]="['/categories']" routerLinkActive="link-active" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-400 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Categorias</a> | |
| <a [routerLink]="['/about']" routerLinkActive="link-active" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-400 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Sobre mi</a> | |
| <!-- .................login ........... --> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Component({ | |
| selector: 'app-navbar', | |
| templateUrl: './navbar.component.html', | |
| styleUrls: ['./navbar.component.scss'], | |
| trigger('showMenu', [ | |
| transition(':enter', [ | |
| style({ opacity: 0, transform: 'scale(0.95)', }), | |
| animate('150ms cubic-bezier(0, 0, 0.2, 1)' , style({ opacity: 1, transform: 'scale(1)' })), | |
| ]), | |
| transition(':leave', [ | |
| animate('100ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'scale(0.95)' })), | |
| ]), | |
| ]) | |
| )} | |
| ngOnInit.... | |
| //Toggle para abrir y cerrar menu | |
| toogleOpen ():void { | |
| this.isOpenMenu = !this.isOpenMenu | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment