为什么我的 CSS 转换在通过 jQuery 添加类时不起作用？

Question

I'm making a website and the transition is not working how it's suppose to.我正在制作一个网站，但转换没有按预期进行。 also, 7.css doesn't interfere because it's the same issue without it and also the transition works when using window:hover.此外，7.css 不会干扰，因为没有它也是同样的问题，而且在使用 window:hover 时过渡也有效。

I tried to add a class through jQuery, and what should happen is it should apply the css transition on the window class.我试图通过 jQuery 添加一个类，应该发生的是它应该在窗口类上应用 css 转换。 however, it does not work and adds the class but does not do the transition.但是，它不起作用并添加了类但不进行转换。

HTML: 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: 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"
      });

fiddle: fiddle小提琴：小提琴

Answer 1

I figured it out, i just needed to get rid of the wrapper div and put #info on the window div.我想通了，我只需要摆脱包装 div 并将 #info 放在窗口 div 上。

为什么我的 CSS 转换在通过 jQuery 添加类时不起作用？

问题描述

1 个解决方案

解决方案1
0 2022-12-17 01:41:57

为什么我的 CSS 转换在通过 jQuery 添加类时不起作用？

问题描述

1 个解决方案

解决方案1 0 2022-12-17 01:41:57

解决方案1
0 2022-12-17 01:41:57