Javascript 添加其他类名后，CSS属性不'；行不通

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

然而，即使我添加了类“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");
      }
    }

---

我的github项目链接

---

谢谢。

您的代码按预期工作。您只是无法看到转换，因为您将

转换持续时间

值设置为

0.5ms

，这是不可能注意到的

通过将其更改为500毫秒，它可以正常工作

transition: all 500ms ease;

下面是一个演示：

//选择器
const todoInput=document.querySelector（“.todo输入”）；
const todoButton=document.querySelector（“.todo按钮”）；
const todoList=document.querySelector（“.todo list”）；
//事件侦听器
addEventListener（“单击”，addTodo）；
todoList.addEventListener（“单击”，删除检查）；
//功能
函数addTodo（事件）{
//阻止提交。
event.preventDefault（）；
//托多分区
const todoDiv=document.createElement（“div”）；
todoDiv.classList.add（“todo”）；
//创立
const newTodo=document.createElement（“li”）；
newTodo.innerText=todoInput.value；
newTodo.classList.add（“待办事项”）；
托多迪夫·阿佩奇尔德（纽托多）；
//复选标记按钮
const completeButton=document.createElement（“按钮”）；
completeButton.innerHTML=''；
completeButton.classList.add（“completebtn”）；
todoDiv.appendChild（完成按钮）；
//检查垃圾箱按钮
const trashButton=document.createElement（“按钮”）；
trashButton.innerHTML=''；
垃圾按钮。类列表。添加（“垃圾btn”）；
todoDiv.appendChild（垃圾按钮）；
//附加到UL列表
托多利斯特。阿佩奇尔德（托多迪夫）；
//清除todoInput值
todoInput.value=null；
}
函数删除检查（e）{
常数项=e.目标；
//删除待办事项❌
if（item.classList.contains（“垃圾btn”））{
const todo=item.parentElement；
//添加动画
todo.classList.add（“fall”）；
todo.addEventListener（“transitionend”，函数（e）{
todo.remove（）；
});
}
//复选标记✔️
if（item.classList.contains（“完整btn”））{
const todo=item.parentElement；
todo.classList.toggle（“已完成”）；
}
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景图像：线性梯度（120度，#f6d365，#fda085）；
颜色：白色；
字体系列：“Poppings”，无衬线；
最小高度：100vh；
}
标题{
字体大小：1.5rem；
}
标题，
形式{
最小高度：20vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
表格输入，
窗体按钮{
填充：0.5雷姆；
字号：2rem；
边界：无；
背景：白色；
}
窗体按钮{
颜色：#d88711；
背景：白色；
光标：指针；
过渡：全部0.3缓；
}
窗体按钮：悬停{
背景：#d88711；
颜色：白色；
}
.todo集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.待办事项清单{
最小宽度：30%；
列表样式：无；
}
托多先生{
保证金：0.5雷姆；
背景：白色；
颜色：黑色；
字体大小：1.5rem；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
过渡：所有500ms缓解；
}
李东东先生{
弹性：1；
}
.垃圾桶，
.完整btn{
背景#ff6f47；
颜色：白色；
边界：无；
填充：1rem；
光标：指针；
字号：1rem；
}
.完整btn{
背景：rgb（73204,73）；
}
.待办事项{
填充：0雷姆0.5雷姆；
}
.fa检查，
垃圾{
指针事件：无；
}
/*我们添加了这个类todo.classList.toggle（“已完成”）*/
.完成{
文字装饰：线条贯通；
不透明度：0.5；
}
.秋天{
变换：translateY（8rem）rotateZ（20deg）；
不透明度：0；
}

Hitayco的待办事项列表
Hitayco的待办事项清单

不要依赖类列表中类名的顺序。使用

.matches（）

函数检查：

if（item.matches（.complete btn））

或使用

item.classList.contains（'complete-btn'）

。谢谢，但问题是即使我添加了

todo.classList.add（“fall”）

fall的CSS属性不起作用请不要将代码发布到第三方网站，因为这些链接可能会随着时间的推移而消失，使您在此处的回答毫无意义。从我的编辑中可以看到，您可以将代码包含到堆栈片段中（编辑答案时按

按钮），它将在此处执行。哦！！我刚注意到。我打错了。我想写一行

transition:all 0.5s ease@ScottMarcus Gotcha。。谢谢
transition: all 500ms ease;