vue写todoList遇到的关于vue执行动画过渡，transitionend的问题

一一

1. <transition-group tag="ul" class="todo-list" @before-leave="leaveHandel" @before-enter="beforeEnterHandel" @enter="enterHandel" @after-enter="afterEnterHandel">
   
2. 
   
3. 
   
4.     <li :class="['todo-item',{completed:item.status}]" v-for="item in todoListData" :data-todo-id="item.id" @click="statusChange" :key="item.id" v-show="item.isShow">
   
5. 
   
6.         <div class="checkbox" :key="item.id+'1'">
   
7. 
   
8.             <div class="i-active" v-if="!item.status"></div>
   
9. 
   
10.             <div class="i-completed" v-if="item.status"></div>
    
11. 
    
12.         </div>
    
13. 
    
14.         <p :key="item.id+'2'">{{item.value}}</p>
    
15. 
    
16.         <div class="delete" @click="deleteItem" :key="item.id+'3'">×</div>
    
17. 
    
18.     </li>
    
19. 
    

复制代码

这个是我写的Vue动画Dom元素
然后下面是我写的对应过度动画钩子函数

1. leaveHandel(e) {
   
2.     this.todoListData[this.dealWithItemIndex].isShow = true
   
3.                 },
   
4.                 beforeEnterHandel(e) {
   
5.     console.log('动画开始');
   
6.     if (!this.todoListData[this.dealWithItemIndex]?.status) {
   
7.         e.style.backgroundColor = '#fff'

复制代码

我的数据对象结构中拥有isShow属性，默认为true，因此元素可以显示；当我点击事件触发时，该属性会被改为false
对应的元素会被隐藏，触发leaveHandel函数，该函数会将isShow改为true
进而触发beforeEnterHandel，进入动画过渡，但是在 e.ontransitionend这个监听事件，无法进入执行
希望有好心的大佬能够帮我解答一下，十分感谢

一一

上面的第二段代码不知道为什么写不进去，我写在这里

1.                 leaveHandel(e) {
   
2.                     this.todoListData[this.dealWithItemIndex].isShow = true
   
3.                 },
   
4.                 beforeEnterHandel(e) {
   
5.                     console.log('动画开始');
   
6.                     if (!this.todoListData[this.dealWithItemIndex]?.status) {
   
7.                         e.style.backgroundColor = '#fff'
   
8.                         e.style.transition = 'all 0s linear'
   
9.                     } else {    // true
   
10.                         e.style.backgroundColor = '#fe7345'     // 生效
    
11.                         e.style.transition = 'all .5s linear'
    
12.                     }
    
13. 
    
14.                 },
    
15.                 enterHandel(e, done) {
    
16.                     if (this.todoListData[this.dealWithItemIndex]?.status) {  // true
    
17.                         let step = 0
    
18.                         console.log(step);      // 能打印 0
    
19.                         e.ontransitionend = function () {       // 不能进入监听
    
20.                             console.log(111);    // 不打印111
    
21.                             step++
    
22.                             if (step == 1) {
    
23.                                 e.style.transform = 'rotate3d(1,0,0,45deg)'
    
24.                                 e.style.transition = 'all .5s linear'
    
25.                             } else if (step == 2) {
    
26.                                 e.style.transform = 'rotate3d(1,0,0,0deg)'
    
27.                                 e.style.transition = 'all .5s linear'
    
28.                             } else {
    
29.                                 done()
    
30.                             }
    
31. 
    
32.                             // }
    
33.                         }
    
34. 
    
35.                         // 改变样式
    
36.                         e.style.backgroundColor = 'green'       // 生效
    
37.                         e.style.transition = 'all .5s linear'
    
38. 
    
39.                         console.log(e,e.ontransitionend);
    
40.                         console.log('动画进行中');      // 正常打印
    
41.                     }else{
    
42.                         done()
    
43.                     }
    
44. 
    
45.                 },
    
46. 
    
47.                 afterEnterHandel(e) {
    
48.                     console.log('动画结束了');      //  正常打印
    
49.                     e.ontransitionend = null
    
50.                 }

复制代码

666666

所以解决了么

13824597405

dealWithItemIndex 这是用来干嘛的