Question

我尝试使用jQuery在页面加载时使用一些fly-in动画制作div。问题是（模糊和缩放）不同步，并且在动画即将完成时会有一些抖动感觉。

提前致谢！

代码段：

＆＃13;

$(document).ready(function() {
  $(".container").css({
    "filter": "blur(0px)",
    "transition": "1s ease-in-out",
    "transform": "scale(1)",
  })
});

＆＃13;

body {
  background: #eee;
}

.container {
  filter: blur(20px);
  transform: scale(0);
}

.signin {
  width: 50%;
  margin: 80px auto 0;
  background-color: rgba(56, 49, 49, 0.13);
  padding: 20px;
  border: 2px ridge rgba(238, 238, 238, 0.13);
  border-radius: 5px;
  -moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
  -webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
  box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
  border-bottom: none;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<body>
  <div class="container">
    <div class="signin">
      <h1>Blah Blah</h1>
      <form>
        <input type="text" class="name" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" />
        <input type="text" class="class1" value="Class" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Class';}" />
        <input type="submit" value="Submit" />
      </form>
      <h2>Please Select a Template</h2>
      <div class="loop">
        <div class="item"> Template 1</div>
        <div class="item"> Template 2</div>
        <div class="item"> Template 3</div>

      </div>
    </div>
  </div>
</body>

＆＃13;

缺乏平滑过渡 - 元素上的CSS变换

0 个答案: