Question

我有一个div应该在0.5秒内平滑滑动到左边。现在，它立即突然出现在新的位置，而不是滑动。

我在按下按钮后使用jQuery将tranlsateX应用于div。它触发了一些ajax，它为div的css（底部）添加了一个变换：

 $.ajax({
         method: 'POST',
         url: '/cities/popup',
         data: { latitude: latitude, longitude: longitude },
         dataType: 'html',
         success: function(data){
          $(".popup").css("display", "block");
          $(".popup").empty();
          $(".popup").append(data);
          $(".popup").css("transform", "translateX(-100%)");
 });

这里是弹出类的所有样式，请注意我在代码块末尾定义的转换时间应为3秒。

.popup{
  background-color: #FFFFFF;
  display: none;
  position: absolute;
  overflow: scroll;
  z-index: 5;
  right: -40%;
  width: 40%;
  height: 100%;
  -webkit-box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  -moz-box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  transition: transform 3s;
}

变换正在运行，div移动，但它不是0.5秒以上的动画运动，只是立即出现在新的位置。我真的不确定如何开始对此进行故障排除。

Answer 1

原因

由于display: none，转换无效。 display: none到display: block无法设置动画，因此会打破过渡。

解决方案

一种解决方案是在不使用display: none的情况下隐藏元素。使用opacity: 0隐藏div并使用opacity: 1显示div时，以下示例有效。

注意：display: none完全删除元素，opacity: 0只是隐藏它，它仍然可以与之交互。对于   例如，如果它位于链接上，则无法单击   由于隐形div的链接。

为了解决这个问题，你可以考虑pointer-events: none（见   browser compatiblity）以便点击事件在其下方传递。您   然后会在显示时将其更改回pointer-events: auto，所以它   可以点击。

基本示例

＆＃13;

body {
  height: 100vh;
}
div {
  height: 100px;
  width: 100px;
  background: #F00;
  transition: transform 1s;
}
body:hover div {
  transform: translateX(100px);
}
/*Will work*/

.willTransition {
  opacity: 0;
}
body:hover .willTransition {
  opacity: 1;
}
/*Doesn't work*/

.wontTransition {
  display: none;
}
body:hover .wontTransition {
  display: block;
}

＆＃13;

<h1> Hover anywhere here to show!</h1>

<h2>Will transition with opacity</h2>
<div class="willTransition"></div>
<h2>Wont transition with display none to block</h2>
<div class="wontTransition"></div>

＆＃13;

Answer 2

尝试使用

transition: all 3s ease;

可能它特别没有采用转换属性。

Answer 3

namespace Blah.Data.Context
{
  [DbConfigurationType(typeof(BlahDbConfiguration))]
  public class BlahContext : DbContext, IDbContext
  {
      public BlahContext() : base("BlahContext")
      {
          Database.SetInitializer(new MigrateDatabaseToLatestVersion<BlahContext, Configuration>());
      }
  }
}

解决！

Answer 4

我认为更好的想法是在弹出窗口上添加类。这是最简单的方法

CSS转换时间未应用于转换

4 个答案:

原因

解决方案

基本示例