-1

Tenho uma div com tamanho infinito e quero que o conteúdo dela deslize para a direita ou para a esquerda.

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

Alguma ideia em angular?

1
  • Tem alguma coisa pronta, para gente poder dar "uma olhada"? Se tiver, adicione o código ao corpo da pergunta. Commented 4/10/2016 às 14:47

1 Resposta 1

1

Você pode criar uma diretiva para manipular a DOM adicionando e removendo classes e CSS para manipular a animação.

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);
        })
      }
    }
  })

Exemplo funcionando: https://jsfiddle.net/t91cmpvx/

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .