添加其他类名后，CSS属性不起作用

Question

我是一名 JavaScript 初学者。我正在构建一个 Todo 应用程序。我创建了一个垃圾按钮和复选标记按钮。当我单击垃圾桶按钮时，我正在尝试删除 div 待办事项。我想在删除之前添加一些过渡。我把代码写在下面作为事件监听器的函数。

但是，即使我添加了 class "fall" ，它的 CSS 属性也不起作用。我的意思是交易。你能帮忙吗？

    function deleteCheck(e) {
      const item = e.target;
    
      //DELETE TODO ❌
      if (item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        //Add animation
        todo.classList.add("fall");
        todo.addEventListener("transitionend", function (e) {
          todo.remove();
        });
      }
    
      //CHECK MARK✔️
      if (item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
      }
    }

---

.fall {
  transform: translateY(8rem) rotateZ(20deg);
  opacity: 0;
}

我的项目的github链接https://github.com/hitaykeskin/vanilla-todo 谢谢。

Answer 1

您的代码按预期运行。您只是看不到过渡，因为您将 transition duration 值设置为 0.5ms，这将是不可能注意到的。

将其更改为 500ms ，它可以正常工作

transition: all 500ms ease;

这是一个演示：

//Selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

//Event Listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);

//Functions
function addTodo(event) {
  //Prevent from submitting.
  event.preventDefault();

  //Todo DIV
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  //Create LI
  const newTodo = document.createElement("li");
  newTodo.innerText = todoInput.value;
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);

  //CHECK MARK BUTTON
  const completeButton = document.createElement("button");
  completeButton.innerHTML = '<i class="fas fa-check"></i>';
  completeButton.classList.add("complete-btn");
  todoDiv.appendChild(completeButton);

  //CHECK TRASH BUTTON
  const trashButton = document.createElement("button");
  trashButton.innerHTML = '<i class="fas fa-trash"></i>';
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);

  //APPEND TO UL LIST
  todoList.appendChild(todoDiv);

  //CLEAR todoInput value
  todoInput.value = null;
}

function deleteCheck(e) {
  const item = e.target;

  //DELETE TODO ❌
  if (item.classList.contains("trash-btn")) {
    const todo = item.parentElement;
    //Add animation
    todo.classList.add("fall");
    todo.addEventListener("transitionend", function (e) {
      todo.remove();
    });
  }

  //CHECK MARK✔️
  if (item.classList.contains("complete-btn")) {
    const todo = item.parentElement;
    todo.classList.toggle("completed");
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(120deg, #f6d365, #fda085);
  color: white;
  font-family: "Poppings", sans-serif;
  min-height: 100vh;
}

header {
  font-size: 1.5rem;
}

header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: white;
}

form button {
  color: #d88711;
  background: white;
  cursor: pointer;
  transition: all 0.3 ease;
}

form button:hover {
  background: #d88711;
  color: white;
}

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  min-width: 30%;
  list-style: none;
}

.todo {
  margin: 0.5rem;
  background: white;
  color: black;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 500ms ease;
}

.todo li {
  flex: 1;
}

.trash-btn,
.complete-btn {
  background: #ff6f47;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1rem;
}

.complete-btn {
  background: rgb(73, 204, 73);
}

.todo-item {
  padding: 0rem 0.5rem;
}

.fa-check,
.fa-trash {
  pointer-events: none;
}

/* we added this class todo.classList.toggle("completed") */
.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

.fall {
  transform: translateY(8rem) rotateZ(20deg);
  opacity: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
      integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
      crossorigin="anonymous"
    />
    <title>Todo List by Hitayco</title>
  </head>
  <body>
    <header>
      <h1>Hitayco's Todo List</h1>
    </header>
    <form>
      <input type="text" class="todo-input" />
      <button class="todo-button" type="submit">
        <i class="fas fa-plus-square"></i>
      </button>
    </form>

    <div class="todo-container">
      <ul class="todo-list">
        <!-- <div class="todo">
          <li class="todo-item"></li>
          <button class="completed-btn"></button>
          <button class="trash-btn"></button>
        </div> -->
      </ul>
    </div>

  
  </body>
</html>