нг-одушевленные вопросы. Переход не идет - PullRequest
Новая
       20

нг-одушевленные вопросы. Переход не идет

0 голосов
/ 28 июня 2018

Попытка заставить ng-animate запускаться каждый раз, когда элемент удаляется из моего массива. Я использую ng-repeat и orderBy - Как мне заставить мои задачи аккуратно и приятно соскользнуть с экрана?

enter image description here

directive.html 

.task-item4.ng-enter, 
.task-item4.ng-leave,
.task-item4.ng-move {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  position:relative;
}
.task-item4.ng-enter {
  left:-10px;
  opacity:0;
}
.task-item4.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}
.task-item4.ng-leave {
  left:0;
  opacity:1;
}
.task-item4.ng-leave.ng-leave-active {
  left:-10px;
  opacity:0;
}
.task-item4.ng-move {
  opacity:0.5;
}
.task-item4.ng-move.ng-move-active {
  opacity:1;
}
</style>

<div class="taskList" class="task-item4" ng-repeat="task in taskList | orderBy : dueDate">
  <div class="taskTopLine"></div>
  <div class="taskCircle" ng-click="completeTask(task); fillCircle(task)"></div>
  <div class="task-check" ng-show="showCheck"></div>
  <p class="taskSubject" ng-click="goToTask(task); editTask(task)">{{ task.name }}</p>
  <p class="taskDue" ng-click="goToTask(task); editTask(task)">Due on {{ task.dueDate | date : "MMMM dd yyyy" }} at {{ task.dueDate | date : "hh:mm a" }} </p>
  <p class="taskDue" ng-click="goToTask(task); editTask(task)">Client: {{ task.contact.firstName }} {{ task.contact.lastName }}</p>
  <img src="/img/trash.svg" alt="" ng-click="deleteTask(task)" callback="deleteTask(task)">
  <div class="taskMarker redMarker" ng-if="task.priority == 'High'"></div>
  <div class="taskMarker yellowMarker" ng-if="task.priority == 'Medium'"></div>
  <div class="taskMarker greenMarker" ng-if="task.priority == 'Low'"></div>
  <div class="taskMarker blueMarker" ng-if="task.completedDate"></div>
</div>

directive.js 

scope.completeTask = task => {
        if (!task.completedDate) {
          DataService.completeTask(task).then(data => {
            amplitude.getInstance().logEvent('User completes a task from Dashboard');
            inform.add('Task complete', {
              ttl: 5000, type: 'success'
            });
            scope.callback();
          });
        } else {
          DataService.unCompleteTask(task).then(data => {
            inform.add('Task uncompleted', {
              ttl: 5000, type: 'success'
            });
            scope.callback();
            amplitude.getInstance().logEvent('User un-completes a task from Dashboard');
          });
        }
      };

1 Ответ

0 голосов
/ 28 июня 2018

Свойство left css будет работать только для элементов с определенным позиционированием, таким как фиксированное или абсолютное. Вы используете относительное положение. Попробуйте использовать translateX, как показано ниже: 

.task-item4.ng-leave{
  transform: translateX(0);
  opacity:0;
}
.task-item4.ng-leave.ng-leave-active {
  transform: translateX(10px);
  opacity:1;
}

Обновлено, чтобы изменить ввод событий, чтобы оставить события

Обновление: попробуйте добавить свойство перехода к самому элементу 

.task-item4 {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  position:relative;
}
...