css 滑动并捕捉AngularJS指令

Posted 2021-05-13

Swipe And Snap AngularJS directive
----------------------------------
Showing the swipe and snap directive

Forked from [Ed Conolly](http://codepen.io/ed_conolly/)'s Pen [AngularJS + Phone start](http://codepen.io/ed_conolly/pen/hdpwI/).

A [Pen](http://codepen.io/anon/pen/PZqjoJ) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

[License](http://codepen.io/anon/pen/PZqjoJ/license).

<div class="device" ng-app="swipeExample">
		<div class="screen">
      
      <!-- This is the directive part. The key is the snapGrid
      array, which defines at what points to animate the
      element to on drag end. -->
      <div class="content">
        <div class="carouselWrap" swipe-and-snap snap-locations="[0, -320, -640]">
          <div id="item1" class="float--left">Slide 1</div>
          <div id="item2" class="float--left">Slide 2</div>
          <div id="item3" class="float--left">Slide 3</div>
        </div>
      </div>
    </div>
</div>

/**
* @file Demonstrates a drag and swipe slide directive.
* Note: imports another codepen which loads angularJS and hammerJS.
*/

// Define the angular module.
angular.module('swipeExample', [])

/**
* The swipeAndSnap directive.
*
* @todo Example.
*/
.directive('swipeAndSnap', function () {
  return {

    link: function (scope, element, attr) {      
     
      var snapLocations = JSON.parse(attr.snapLocations),
      restPosition = 0, // Define the location to end.
      positionX = 0; // The current position.
      
      /**
      * Calculate the snap location.
      *
      * Called on drag end to work out where to animate
      * the div to.
      *
      * @function
      *
      * @param {number} position
      * The current position.
      *
      * @returns {number}
      * The position to snap to.
      */
      var calculate_snap_location = function (position) {
        
        // Used to store each difference between current position and each snap point.
        var currentDiff; 
        
        // Used to store the current best difference.
        var minimumDiff;
        
        // User to store the best snap position.
        var bestSnap;
        
        // We're going to cycle through each snap location
        // and work out which is closest to the current position.
        for (var i=0; i < snapLocations.length; i++) {
          
          // Calculate the difference.
          currentDiff = Math.abs(positionX - snapLocations[i]);
          
          // Works out if this difference is the closest yet.
          if(minimumDiff === undefined || currentDiff < minimumDiff) {
            minimumDiff = currentDiff;
            bestSnap = snapLocations[i];
          }
        }
        
        return bestSnap;
      };
      
      /**
      * Perform any setup for the drag actions.
      */
      Hammer(element[0]).on("dragstart", function(ev) {
        
        // We dont want an animation delay when dragging.
        element.removeClass('animate');
      });
      
      /**
      * Follow the drag position when the user is interacting.
      */
      Hammer(element[0]).on("drag", function(ev) {
        
        // Set the current position.
        positionX = restPosition + parseInt(ev.gesture.deltaX);
        
        element.css('-webkit-transform', 'translate3d(' + positionX + 'px,0px,0px)');
        element.css('transform', 'translate3d(' + positionX + 'px,0px,0px)');
      });
      
      /**
      * The drag is finishing so we'll animate to a snap point.
      */ 
      Hammer(element[0]).on("dragend", function(ev) {
        element.addClass('animate');
         
        // Work out where we should "snap" to.
        restPosition = calculate_snap_location(positionX);
         
        element.css('-webkit-transform', 'translate3d(' + restPosition + 'px, 0px, 0px)');
      });
    }
  };
});

<script src="http://codepen.io/ed_conolly/pen/hdpwI"></script>

#item1 {
  background: #69D2E7;
  height:100%;
  width:320px;  
}

#item2 {
  background: #F38630;
  height: 100%;
  width: 320px;
}

#item3 {
  background: #A7DBD8;
  height: 100%;
  width: 320px;
}

div.carouselWrap {
  width: 1036px;
  background: white;
  height: 100%;
  color: white;
  font-family: "Gill Sans / Gill Sans MT", sans-serif;
  font-size: 3em;
  line-height: 568px;
  text-align: center;
}

.animate {
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s;
}

div.float--left {
  float: left;
}

/**
* Generic boilerplate CSS
*/
* { margin: 0px; padding: 0px; }
body {
	background: #2e2c35;
	width: 100%; height: 100%;
}
div.device {
	height: 798px; width: 378px;
	width: 440px; height: 807px;
	background: url('http://creativeda.sh/sandbox/bounce_menu/img/iphone_black.png') no-repeat center center; 
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	position: absolute; margin: auto;
	top: 0px; bottom: 100px; left: 0px; right: 0px;
}
div.screen { 
	height: 568px; width: 320px;
	position: absolute;
	top: 119px; left: 60px;
	overflow: hidden;
}
div.content {
  height:100%;
  width:100%;
	background: #375585;
	position: absolute;
	top: 0px; left: 0px;
	z-index: 300;
	-webkit-transition: all 250ms ease;
	   -moz-transition: all 250ms ease;
	    -ms-transition: all 250ms ease;
	     -o-transition: all 250ms ease;
	        transition: all 250ms ease;
}