Questions tagged transition

Explore the latest questions and answers asked by our top developers.

How can i program my angular animation with dynamic values?

I have a page transition animation in angular between the home and the models page. Both page have a button, button my-button-start-page on the home page, my-button-end-page on the models page. I would like to move the my-button-start-page to the my-button-end-page’s location during the transition. Is it even possible like how i tried in the […]

By Bezonce
Categorized as angular, animation, transition Tagged , ,

Transition between *ngIf with Ionic v5

How can I make a fade transition between 2 elements with *ngIf? // my.component.html <ion-toolbar class="toolbar" *ngIf="!showSearchbar"> <ion-buttons slot="start"> <ion-back-button *ngIf="canGoBack"></ion-back-button> <ion-menu-button *ngIf="!canGoBack"></ion-menu-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button (click)="showSearch()"> <ion-icon slot="icon-only" ios="search" md="search-sharp"></ion-icon> </ion-button> </ion-buttons> <ion-title>{{‘lbl_client_search2’ | getlabel}}</ion-title> </ion-toolbar> <ion-toolbar class="toolbar" *ngIf="showSearchbar"> <ion-buttons slot="start"> <ion-button (click)="showSearch(false)"> <ion-icon slot="icon-only" name="arrow-back"></ion-icon> </ion-button> </ion-buttons> <ion-input #searchInput autofocus debounce="1000" inputmode="search" […]

How to destroy angularjs directive?

I have a AngularJS directive that I’ve inserted on the form of my SPA application. What it does is that it checks if the form is dirty before transitioning to a new state. Here is the code below. app.directive(‘leavepage’, [‘$transitions’, ‘$uibModal’, ‘$q’, function ($transitions, $modal, $q) { return { restrict: ‘A’, require: ‘^form’, link: function […]

Angular elastic enter height animation

I’m new to Angular Animations and am needing to implement the below animation on a list and its items. My desired outcome of the animation is as follows: I’ve read the documentation and the closest I’ve been able to piece together is the following: export const items = trigger(‘items’, [ transition(‘:enter’, [ style({ ‘max-height’: ‘1px’ […]

Smooth color change with a slider Angular

What I am trying to achieve is different background color depending on slider value. The slider looks something like this: <mat-slider id="slider" #sldr max="100" min="0" step="10"></mat-slider> And the element I’m changing like this: <div class="area" [ngClass]="{‘red’: sldr.value <= 20, ‘orange’: sldr.value <= 40 && sldr.value > 21, ‘yellow’: sldr.value <= 60 && sldr.value > 41, […]

By Kateryna
Categorized as angular, css, mat-slider, slider, transition Tagged , , , ,

Setting url through `urlService.url` not working inside `onEnter`

One of our requirements is having to redirect to a certain url from within an onEnter hook in one of my states. I have the following code: It seems that is not working properly in most cases (I’m really sorry that I can’t replicate what I have in this project in a repro repo): After […]

By mrahhal
Categorized as angular, angular-ui-router, transition, uirouter

Angular 7 router transition animation triggered by scroll

There is an application inwhich there are three simple component. I would like switch between the components by scrolling with route trasition animation. The animation would be that the first component slide up and out, and a second component slide in from bottom. I know it’s very similar to a simple webpage with anchors and […]

By gaborvrg
Categorized as angular, animation, router, transition

AngularJS: Get Url before redirect

I have a state defined for all wrong Urls .state(‘404’, { url: ‘/404’, data: { title: ‘Page not found’ }, templateUrl: errorHandlerTemplate, parent: ‘authenticated’ }) I have a redirect set up to make it work $urlRouterProvider.otherwise(‘/404’); I want to get the original Url that the user tried to enter before the redirect happened. $transitions.onBefore({ entering: […]

By lohiarahul
Categorized as angular-ui-router, angularjs, javascript, transition

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us