CSS过渡淡入

所以我以前使用过CSS转换，但我有一个独特的例子。我正在编写一个用于创建modals的自定义插件。本质上，我动态创建了一个div

document.createElement（'div'）

，并用几个类将其附加到主体中。这些类定义颜色和不透明度。我想严格使用CSS，以便能够在这个div中淡入淡出，但是改变状态似乎很困难，因为它们需要一些用户交互

---

尝试了一些高级选择器，希望它能改变状态，尝试了媒体查询，希望改变状态……寻找任何想法和建议，如果可能的话，我真的很想将其保留在CSS中

我相信您可以将类添加到元素中。但无论哪种方式，您都必须使用Jquery或reg JS

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}

---

好的，首先，当您使用

（document.createElement（'div'））

创建一个div时，我不确定它是如何工作的，所以我现在可能错了，但是是否可以使用：target伪类选择器来实现这一点

如果您查看下面的代码，您可能会发现我使用了一个链接来定位div，但在您的情况下，可能会从脚本中定位#new，这样会使div在没有用户交互的情况下淡入，还是我想错了

下面是我的示例代码：

HTML

---

。。。现在CSS关键帧支持非常好：

。淡入{
不透明度：1；
动画名称：fadeInOpacity；
动画迭代次数：1；
动画计时功能：轻松自如；
动画持续时间：2秒；
}
@关键帧FadeInCapacity{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}

---

淡入淡出Scotty

我总是喜欢在淡入淡出这样的小型CSS类中使用mixin，以防您想在多个类中使用它们

@mixin fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

---

如果你不想使用mixin，你可以创建一个普通的类。淡入。

不确定我是否理解了这个问题。您是否正在寻找一种不需要用户交互的解决方案，以使div淡入？是的，这是正确的…我将以编程方式创建一个div，并希望它淡入。请接受帮助，尝试通过各种技术手动触发，但似乎都不起作用。看到这篇文章，他们似乎也放弃了=（好的。如果我想到其他可能解决这个问题的方法，我会给你回复。对于任何遇到这个问题的人，这里有一个很好的关于转换的参考资料，如果你不是通过编程方式添加元素，你仍然想用JS来添加这个类，因为你可能想等待document.ready，这是纯CSS无法做到的。这并不能回答这个问题ion正在询问如何使用CSS转换。干杯，伙计，我已经尝试了5种不同的方法来使用JS和CSS转换，这是第一种在每一页上都能正常工作的方法，每次都将其放入body类中。：）@Zaqx转换是CSS，触发因素取决于您。@DigitalDesignDj这里引用了页面顶部问题中的一句话：“我希望严格使用CSS，以便能够在这个div中淡出，但要更改状态似乎很困难，因为它们需要一些用户交互。”

#new {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    opacity: 0;    
}


#new:target {
    -webkit-transition: opacity 2.0s ease-in;
       -moz-transition: opacity 2.0s ease-in;
         -o-transition: opacity 2.0s ease-in;
                                  opacity: 1;
}

@mixin fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}