jquery - rails : slideUp() is working but with no transition

Question

对于一个简单的待办事项列表项目，我想使用 .slideUp() 方法来删​​除任务。当线条消失时，这种效果很好，但 Action 执行得很粗糙，没有平滑的过渡效果。如果我更改 .slideUp() 方法的持续时间，该操作迟早会执行，但仍然没有过渡效果。

我需要特定的文件或 gem 吗？.slideUp() 方法适用于每个 html 标签吗？ (这里是表格，不是 ul)

感谢您的帮助!

更新
我将“tr”高度延长到 90 像素，并观察到 ​​SlideUp() 可以完美运行，直到动画与“tr”和“td”标签内的文本相遇。此时，动画“停止”，几毫秒后，这条线终于消失了。就好像动画可以在线条的空白处正常工作，而在文本上出现错误。

//我的 TaskController 和销毁操作

def destroy
 @task = Task.find(params[:id])
 @task.delete

 respond_to do |format|
  format.html { redirect_to root_path }
  format.js { }
 end
end

//destroy.js.erb

$('tr[data-task-id="<%= @task.id %>"]').slideUp(500);

//index.html.erb文件(索引为root_path)(摘录)

<% @tasks.each_with_index do |task, index| %>
 <tr data-task-id="<%= task.id %>">
  <td class="text-center"><%= index + 1 %></td>
  <td><%= task.title %></td>
  <td class="text-center"><%= task.time.to_s + " h"%></td>
  <td class="text-center">
  <%= link_to task, method: :delete, remote: true do %>
    <i class="fa fa-times" aria-hidden="true"></i>
  <% end %>
  </td>
 </tr>
<% end %>

Answer 1

您可能需要添加缓动:

$("tr[data-task-id="<%= @task.id %>"]").slideUp({ duration: 500, easing: "easeInOutQuart" });