1

I have an angular animation that only needs to take place in the responsive view that has a button that triggers the animation, How can I approach this by only having this in the responsive and not the desktop? i I have the animation working, I just need to make sure when NOT mobile the animation doesn't get trigger, but still show the div, if responsive show with animation. (I don't have a button to trigger it in the desktop) it needs to show by default.

ts

animations: [
    trigger('slideInOutCC', [
      transition(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('.7s', style({ transform: 'translateX(0%)' }))
      ]),
      transition(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('.7s', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]
 onToggleSideBar(flag: boolean) {
    this.toggleSideBarFlag = flag;
  }

HTML

 <div [@slideInOutCC] *ngIf="toggleSideBarFlag" class="credit-card-container  {{ submittingPayment ? 'payment-success-container' : ''}}">
        <app-bulk-pay-credit-card [ccTotalDue]="totalDue" [pickupAvailabilityList]='selectedEquipment' (submittingPayment)="isSubmittingPayment(true)"
          (toggleSideBar)="onToggleSideBar(false)" (close)="onCloseBulkPay(false)"></app-bulk-pay-credit-card>
      </div>
Improve this question

2 Answers 2

Reset to default
4

Import the LayoutModule from Angular CDK, then use the BreakpointObserver to detect screen size, Here is a working example in this stackblitz

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('.7s', style({ transform: 'translateX(0%)' }))
      ]),
      transition(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('.7s', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ],
  template: `
    <div *ngIf="mobile | async" [@slideInOut] class="obj">
      Test
    </div>
    <div>handset portrait screen size: {{mobile | async}}</div>
  `
})
export class AppComponent {

  mobile: Observable<boolean>;

  constructor(breakpointObserver: BreakpointObserver) {

    // Observe screen size changes
    this.mobile = breakpointObserver.observe([
      Breakpoints.HandsetPortrait
    ]).pipe(map(res => res.matches));

  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You can do it this way:

app.component.ts

@Component({
  selector: 'my-app',
  template: `
   <h1 #animateMe>{{title}} </h1>
   <button *ngIf="isMobile" (click)="animateMe.classList.add('anim')">Animate</button>`
})
class AppComponent {  
  title = "Hello"
  isMobile = checkmobile() //set to `true` if you want to see it on desktop
}

style.css

.anim {
  color: red;
  transition: color 500ms;
}

checkMobileFunction

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

also here is pen demonstrating it and here is original response how to detect mobile device

Note: this is minimal code for desired behavior

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.