【问题标题】:Is it possible to fade in newly created elements using only css3?是否可以仅使用 css3 淡入新创建的元素?
【发布时间】:2013-10-07 04:13:16
【问题描述】:

我正在使用聊天脚本。 我无法控制任何 javascript,只有 CSS。我想知道是否可以让帖子在添加时淡入,仅使用 CSS3。

以下是聊天脚本的简化示例:

http://jsfiddle.net/CF4pj/1/

<a class="click" href="#/">click</a>

<div class="stuff"></div>

<script>

$("a.click").click(function() {
    $("div.stuff").append("<div class='lol'>text text text text text</div>");
});

</script>

是否有任何 CSS3(只有 CSS3,没有 javascript)我可以添加到上面的脚本中以使新的“帖子”淡入?

【问题讨论】:

标签: javascript html css


【解决方案1】:

给你...

div.click {
    background:yellow;
    display:inline;
}
div.lol {
    padding:5px;
    border:1px solid green;
    margin:5px 0;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

看看这个小提琴...jsfiddle

【讨论】:

  • 注意,也许你的组件需要display: block 来处理动画
【解决方案2】:

你可以这样使用:

<code>
    .lol {
        opacity: 0;
        -webkit-transition: opacity 2s ease-in;
        -moz-transition: opacity 2s ease-in;
        -o-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
        transition: opacity 2s ease-in;
    }​
</code>

【讨论】:

  • 这不起作用,因为新元素不会转换它的css属性,它只会以给定的不透明度开始
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-19
  • 1970-01-01
  • 1970-01-01
  • 2014-07-19
  • 1970-01-01
相关资源
最近更新 更多