目前项目的需求是, 点击关注按钮, 关注人数(item.attentionNum)+1, 同时弹出+1的动画, 动画结束后删除动画元素
0
326{{item.attentionNum}}人关注
function followPlus(){
//获取`.guanzhunum`的p
var parent = document.querySelectorAll('p.guanzhunum')[index];
//创建+1的动画的span
var span = document.createElement('span');
//给span定位
span.setAttribute('style', 'display: block; position: absolute; left: 0; top: 0; color: red; font-size: bold; transition: all 0.5s ease; ')
//span的内容为+1
span.innerHTML = '+1'
//附加到父元素上
parent.appendChild(span);
//应用动画效果
setTimeout(function(){
span.style.opacity = '0';
span.style.top = '-0.5rem';
}, 0);
//监听span的transitionend事件, 在动画结束后移除span元素
span.addEventListener('transitionend', function(){
this.parentNode.removeChild(this);
})
}; 现在问题是在transitionend事件触发后报错bundle.js:1093 Uncaught TypeError: Cannot read property 'removeChild' of null
没有获取到this.parentNode元素
而在eventListener里加个debugger, 单步执行就没问题
求解!!
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...