Question

我正在构建一个叠加层（模态或对话框的背景），我希望它在创建元素时淡入。我通过使用CSS3过渡向元素添加/删除new MyClass(clazz.asInstanceOf[Class[Enum[_]]])类来完成动画。

.visible

当DOM上已存在overlay元素时，一切正常：

# SASS styles
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  height: 100%;
  left: 0;
  position: fixed;
  pointer-events: none;
  top: 0;
  width: 100%;
  will-change: opacity;
  @include transparency(0);
  @include transition(opacity 0.3s cubic-bezier(0, 0, 0.3, 1));

  &.visible {
    pointer-events: auto;
    @include transparency(1.0);
  }
}

然而，当我创建元素然后尝试为它设置动画时，它不会：

$(".overlay").addClass("visible") # => does animation as expected...

我理解这是因为JavaScript正在创建并“立即”添加类，所以我要做的就是：

# JavasScript using jQuery
tag = $("<div class='overlay'></div>")
$("body").append(tag)
tag.addClass("visible")

通过“隐藏”然后“显示”元素，它有足够的时间让add类为元素设置动画。

问题这显示/隐藏一个元素似乎非常hacky所以我可以通过CSS过渡动画它。有更清洁的方法来实现这个吗？

Answer 1

＆＃34;清洁＆＃34;是在旁观者的眼中，但一种简单的方法是在添加可见类之前等待勾号：

$("body").append(tag);
setTimeout(function () { 
  tag.addClass("visible");
}, 0);

在添加课程之前，等待添加完成。您可能需要将0值调高一些。

创建后创建HTML元素和动画

1 个答案: