Question

对于一个简单的待办事项列表项目，我想使用.slideUp（）方法删除任务。这项工作正常，因为线条消失了，但是动作被光滑地执行，没有平滑的过渡效果。如果我改变.slideUp（）方法的持续时间，该动作迟早会执行，但仍然没有转换效果。

我是否需要特定文件或宝石？ .slideUp（）方法是否适用于每个html标记？（这是一张桌子，不是ul）

感谢您的帮助！

更新
我扩展了＆＃34; tr＆＃34;高度为90px并观察到slideUp（）完美无缺，直到动画符合内部文本＆＃34; tr＆＃34;和＆＃34; td＆＃34;标签。此时，动画＆＃34;停止＆＃34;几毫秒后，这条线终于消失了。就好像动画可以在行的白色空格和文本上的错误上正常工作。

//我的TaskController和destroy动作

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

Answer 2

我还没有发现为什么slideUp（）效果对于tr标签来说并不完全平滑，但我通过使用td标签和tr标签设置了一个小延迟来解决它（不完美但暂时没问题）他们之间：

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

Rails：slideUp（）正在运行但没有转换

2 个答案: