通过jQuery添加类时CSS过渡效果失效的问题排查

问题情况 #

• 通过jQuery给#info1添加close类，仅类添加成功，但.window元素的过渡动画未触发
• 移除7.css后问题依旧，排除第三方样式影响
• .window元素在hover状态下过渡效果正常，说明过渡属性本身有效

相关代码 #

HTML #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://unpkg.com/7.css">
  </head>
  <body>
    <div class="vertical"></div>
    <div id=info1>
    <div class="window active glass center400" style="max-width:400px;">
      <div class="title-bar">
        <div class="title-bar-text">Info</div>
        <div class="title-bar-controls">
          <button aria-label="Minimize" disabled></button>
          <button aria-label="Maximize" disabled></button>
          <button aria-label="Close" class=closewindow data-parentid=info1 onclick=closeinfo()></button>
        </div>
      </div>
      <div class="window-body has-space">
        <h4>donkeys are pretty cool</h4><br><br>
        i love donkeys.
      </div>
    </div>
    </div>
  </body>
</html>

CSS #

body {
  margin: 0;
  padding: 0;
  background: url(img0.jpg) center center fixed;
  overflow: hidden;
}
.window {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: perspective(0), rotateZ(0); /* 此处语法错误 */
  opacity: 1;
  -webkit-transition: 200ms ease all, 300ms ease opacity;
  -moz-transition: 200ms ease all, 300ms ease opacity;
  -ms-transition: 200ms ease all, 300ms ease opacity;
  transition: 200ms ease all, 300ms ease opacity;
}
.window-body {
  -webkit-user-select: default;
  -ms-user-select: default;
  user-select: default;
}
div.vertical {
  display: none;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000 !important;
  background: red;
}

@media only screen and (max-aspect-ratio: 6/5) {
  div.vertical {
    display: block;
  }
}
h4 {
  padding: 0;
  margin: 0;
}
.center400 {
  left: calc(50vw - 200px);
  top: 35vh;
}
[role=button],button{
    transition: 100ms;
}
.close {
  transform-style: preserve-3d;
  transform: perspective(1500px) rotateX(10deg) translateY(-10px);
  opacity: 0;
}

jQuery #

function closeinfo() {
  $("#info1").addClass("close");
}
$(".window").draggable({
  handle: ".title-bar"
});

问题原因与修复 #

1. 类作用对象错误 #

close类被加到#info1（.window的父元素）上，但过渡属性和目标样式都定义在.window元素上，父元素的类无法直接触发子元素的样式变化与过渡。

2. CSS语法错误 #

.window的transform属性使用逗号分隔多个变换，正确写法应该用空格分隔，这个语法错误会直接导致过渡失效。

修复步骤 #

方案一：调整类的作用对象

修改jQuery代码，将close类直接加到.window元素上：

function closeinfo() {
  $("#info1 .window").addClass("close");
}

方案二：调整CSS选择器

修改close类的CSS选择器，让样式作用于子元素：

.close .window {
  transform-style: preserve-3d;
  transform: perspective(1500px) rotateX(10deg) translateY(-10px);
  opacity: 0;
}

必须修正的语法错误

将.window中的transform属性修正为正确写法：

.window {
  transform: perspective(0) rotateZ(0); /* 用空格分隔变换 */
  /* 其余属性保留 */
}

完成以上调整后，点击关闭按钮即可触发.window元素的过渡动画。

内容的提问来源于stack exchange，提问作者clos