ng-animate问题。过渡不行

Question

每当从我的数组中删除某项时，都尝试触发ng-animate。我正在使用ng-repeat和orderBy-如何使我的任务轻而易举地滑出屏幕？

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

Answer 1

左css属性仅适用于具有特定位置（例如固定或绝对）的元素。您正在使用相对位置。尝试使用如下所示的translateX：

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

已更新为将输入事件更改为离开事件

更新：尝试将transition属性添加到项目本身

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