Camera Implementation using Animation

We faced a situation where we have to add profile image in a form .The camera should able to capture image from camera and  can upload from gallery.Below you will find the solution for this and some animation is added for its look and feel.

Option to capture image from camera or from gallery

In Html the below code:

In .js file

 $scope.signUpImage = function () {  
   $scope.hideSheet = $ionicActionSheet.show({  
     buttons: [  
       {text: 'Take photo'},  
       {text: 'Photo from library'}  
     ],  
     titleText: 'Add images',  
     cancelText: 'Cancel',  
     buttonClicked: function (index) {  
       $scope.addImage(index);  
     }  
   });  
 };  
 $scope.addImage = function (type) {  
   $scope.hideSheet();  
   saveMedia(type);  
 };  
 function saveMedia(type) {  
   $cordovaCamera.getPicture(optionsForCordovaCamera(type)).then(  
     function (imageData) {  
       $scope.temp_image = "data:image/png;base64," + imageData;  
       image_data = imageData;  
     }  
   );  
 };  
 function optionsForCordovaCamera(type) {  
   var source;  
   switch (type) {  
     case 0:  
       source = Camera.PictureSourceType.CAMERA;  
       break;  
     case 1:  
       source = Camera.PictureSourceType.PHOTOLIBRARY;  
       break;  
   }  
   return {  
     quality: 60,  
     destinationType: Camera.DestinationType.DATA_URL,  
     sourceType: source,  
     allowEdit: true,  
     popoverOptions: CameraPopoverOptions,  
     saveToPhotoAlbum: false,  
     targetWidth: 300,  
     targetHeight: 300  
   };  
 };  

Below code is for close button.

 $scope.closeImage = function () {  
   $scope.temp_image = null;  
 }  

In scss for creating custom animation you can use below code.But for the by default animation you can follow the link:ng-animate

 .my-animation.ng-enter {  
  /* standard transition code */  
  transition: 2s linear all;  
  opacity: 0;  
 }  
 .my-animation.ng-enter-stagger {  
  /* this will have a 100ms delay between each successive leave animation */  
  transition-delay: 0.8s;  
  /* As of 1.4.4, this must always be set: it signals ngAnimate  
   to not accidentally inherit a delay property from another CSS class */  
  transition-duration: 1s;  
 }  
 .my-animation.ng-enter.ng-enter-active {  
  /* standard transition styles */  
  opacity: 1;  
 }  
 .fade.ng-leave {  
  animation: my_fade_animation 0.5s linear;  
  -webkit-animation: my_fade_animation 0.5s linear;  
 }  
 @keyframes my_fade_animation {  
  from {  
   -webkit-transform: translate3d(0px, 0, 0);  
   transform: translate3d(0px, 0, 0);  
  }  
  to {  
   opacity: 0;  
   -webkit-transform: translate3d(-10px, 0, 0);  
   transform: translate3d(-10px, 0, 0);  
  }  
 }  
 @-webkit-keyframes my_fade_animation {  
  from {  
   -webkit-transform: translate3d(0px, 0, 0);  
   transform: translate3d(0px, 0, 0);  
  }  
  to {  
   opacity: 0;  
   -webkit-transform: translate3d(-10px, 0, 0);  
   transform: translate3d(-10px, 0, 0);  
  }  
 }  
 .camera_size {  
  color: $theme_color;  
  font-size: 25px;  
 }  
 .margin_bottom {  
  margin-bottom: 1px;  
 }  
 .icon_border {  
  border-radius: 50%;  
  padding-top: 5px;  
  width: 36px;  
  height: 36px;  
  margin: 2px 1px;  
  border: 1px solid $theme_color;  
  display: inline-block;  
 }  
 .img_profile {  
  border-radius: 5px;  
  width: 100px;  
  height: 100px;  
 }  

After applying scss

After  selection of image from gallery