如何解决如何使classList.toggle跟随类的CSS
.do-flip {
transform: rotateX(180deg);
transform-style: preserve-3d;
transition: transform 0.8s,-webkit-transform 0.8s;
}
当我单击导致将该类添加到元素的按钮时,卡片翻转,而当我单击导致classList.toggle的背面时,卡片翻转。
它不执行的操作是使用与原始翻转相同的变换样式和过渡效果来进行翻转(向后翻转)。它只是瞬时显示前面。
解决方法
那是因为您删除了包含过渡编码的类。您需要将默认类设置为具有要返回的过渡效果,或者创建一个新的undo-flip类,classList.replace('do-flip','undo-flip')
,反之亦然。
const card = document.querySelector('.card').addEventListener('click',(e) => { e.target.classList.toggle('do-flip');
});
.card {
transform-style: preserve-3d;
transition: transform 0.8s,-webkit-transform 0.8s;
}
.do-flip {
transform: rotateX(180deg);
}
<div class="card">card-flip</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。