Slide div to right and left on angular click

Asked

Viewed 685 times

-1

I have a div with infinite size and I want the contents of it to slide right or left.

<div class="seta-esquerda">Botão deslizar para esquerda (200px)</div>
<div class="seta-esquerda">Botão deslizar para direita (200px)</div>

Some idea in angular?

javascript angularjs

  • Is there anything ready so we can "take a look"? If you have, add the code to the question body.

1 answer

1


You can create a directive to manipulate the DOM by adding and removing classes and CSS to manipulate the animation.

HTML

<div ng-app="app" ng-controller="AppCtrl as vm">
    <button ng-click='vm.move()'>Move</button>
    <div class="slide" move='vm.side'></div>
</div>

CSS

.slide{
  width: 50px;
  height: 40px;
  background: blue;
  margin-left: 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease
}
.slide.left{
  margin-left: 0;
}
.slide.right{
  margin-left: 200px;
}

Javascript (Angular)

angular.module('app', [])
    .controller('AppCtrl', function () {
            var vm = this;
      vm.side = 'left';
      vm.move = function () {
        vm.side = vm.side == 'left'? 'right' : 'left';
      }
    })
  .directive('move', function () {
    return {
        restrict: 'A',
      scope: {move: '='},
      link: function (scope, element, attrs, controller) {
        scope.$watch('move', function (side) {
            angular.element(element).addClass(side);
          var toRemove = side == 'left'? 'right' : 'left';
          angular.element(element).removeClass(toRemove);
        })
      }
    }
  })

Working example: https://jsfiddle.net/t91cmpvx/

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.