Как создать «удержание» для подтверждения ›› кнопка

Как можно удерживать кнопку подтверждения, аналогичную той, которую использует designmodo?

У меня есть рабочая версия, использующая jQuery, но я не знаю, как включить это в Angular. Возможно ли это с ngAnimate?

jsfiddle css:

path {
    stroke-dasharray: 119;
    stroke-dashoffset: 119;
}

.draw {
    -webkit-animation: dash 3s ease forwards;
}    

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

jsfiddle js:

$('.delete-icon').mousedown(function() {     
    $('path').attr('class', 'draw');
});

$('.delete-icon').mouseup(function() {
    $('path').attr('class', 'progress');
});

$("path").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    console.log('callback');
    $('.delete-icon').hide();
});

angularjs ng-animate
person benwsmith    schedule 08.12.2014    source источник
comment
Где на этом сайте мне ожидать увидеть то, что вы описываете? Лучше не писать jQuery для решения проблемы AngularJS. Подходы настолько сильно различаются, что зачастую вы все равно не можете повторно использовать большую часть своей работы.   -  person isherwood    schedule 09.12.2014
comment
Возможно, связано: stackoverflow .com / questions / 79816 /.   -  person isherwood    schedule 09.12.2014
comment
Извините, я специально искал ответ AngularJS, а не простой js, как я уже понял, как я писал выше.   -  person benwsmith    schedule 09.12.2014

Ответы (2)


arrow_upward
0
arrow_downward

Итак, разобрался, как это сделать, подумал, что оставлю ответ на случай, если кто-то еще столкнется с этим.

Важным было выяснить, как использовать jQuery для выполнения обратного вызова после завершения анимации. Возможно, есть способ сделать это с помощью Angular, но единственные обратные вызовы, которые я смог найти, - это когда класс был добавлен / удален, а это не то, что мне нужно.

http://plnkr.co/edit/Lafds0KA04mcrolR9mHg?p=preview

var app = angular.module("app", ["ngAnimate"]);

app.controller("AppCtrl", function() {
  this.isHidden = false;
  this.deleteIt = function() {
    this.isHidden = !this.isHidden;
  }

  app.hidden = false;
});

app.directive("hideMe", function($animate) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.hideMe, function(newVal) {
      if(newVal) {
        $animate.addClass(element, "draw");
      } else {
        $animate.removeClass(element, "draw");
      }
    });
  }
});

app.animation(".draw", function() {
  return {
    addClass: function(element, className, done) {
      //
      jQuery(element).animate({
        "stroke-dashoffset": 0
      }, 3000, "easeOutCubic", function() {
        console.log(app.hidden);
      });

      return function(cancel) {
        if(cancel) {
          jQuery(element).stop();
        }
      }
    },
    removeClass: function(element, className, done) {
      //
      jQuery(element).animate({
        "stroke-dashoffset": 119
      }, 350, "linear", function() {
        console.log('canceled');
      });

      return function(cancel) {
        jQuery(element).stop();
      }
    }
  }
});
person benwsmith    schedule 09.12.2014

arrow_upward
0
arrow_downward

Хорошо, у меня есть на это изысканный ответ. Посмотреть здесь

Я отказался от анимации и jQuery по двум причинам:

  1. Я не мог понять, как заставить jQuery выполнить обратный вызов в область видимости.
  2. Обратный вызов jQuery done выполняется только при наведении курсора мыши после завершения анимации.

Вероятно, есть способы обойти это, но я не мог этого понять.

Вместо этого я использовал специальные классы анимации angular, которые запускают обещание по завершении анимации. Конкретно:

.line.draw {
  -webkit-animation: dash 3s ease forwards;
}
.line.draw-add {
}
.line.draw-add-active {
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

Мне не нужно было использовать .line, но я оставил его там из-за лени.

Я также использовал изолирующую область видимости для ссылки на область в контроллере:

scope: {
  'myAnimate': '=',
  'deleteTodo': '&'
},

Я думаю, что это все сложные моменты в этом решении. Если у кого-то есть вопросы, не стесняйтесь спрашивать.

person benwsmith    schedule 23.12.2014