Question

我想做什么：

向我的DOM添加一个新元素，并使用css3为其不透明度设置动画。

我的解决方案

通过JavaScript添加div“.bar.fade”，然后立即添加“in”类。

我的解决方案存在问题

不使用setTimout（）函数，div将立即绘制可见（无css转换）。为什么会发生这种情况以及如何预防？我假设，使用setTimeout（）不是最好的做法，是吗？

SCSS

.bar
{

  position: absolute;
  bottom: 0;
  top: 0;
  width: 100%;
  background-color: red;
  z-index: -1;
  opacity: 0;
  visibility: hidden;

  &.fade
    {
        @include transition(
            visibility .75s ease-in-out,
            opacity .75s ease-in-out
        );
    }

    &.in
    {
        opacity: 1;
        visibility: visible;
    }
}

JS（Zepto）

$('.foo').on('click', function() {
    $('body').append('<div class="bar fade"></div>');
    $('.bar').addClass('in');
});

$('.fooDelay').on('click', function() {
    $('body').append('<div class="bar fade"></div>');

    setTimeout(function(){
        $('body > .bar').addClass('in');
    }, 50);
});



$('.fooRemove').on('click', function(){
    $('body').find('.bar').remove();
})

我为了更好的测试而制作了一个代码：http://codepen.io/dschu/pen/wBVmLp

Answer 1

为了使用纯CSS添加动画，您需要在元素内定义动画，然后定义动画的关键帧。但你也可以通过其他方式做到这一点，这只是一种允许你添加更多动画状态或关键帧的方法。

添加内部，留下您定义的所有css属性

.bar{
    -webkit-animation-name:fadeInCSS3;
    -moz-animation-name:fadeInCSS3;
    -ms-animation-name:fadeInCSS3;
    -o-animation-name:fadeInCSS3;
    animation-name:fadeInCSS3; 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

然后添加关键帧，例如

@-webkit-keyframes fadeInCSS3 {
    0% {
        display:none; 
        opacity: 0;
    }

    1% {
        display: block ; 
        opacity: 0;
    }

    100% {
        display: block ; 
        opacity: 1;
    }
}

查看我对您的codepen的快速编辑：

http://codepen.io/alexincarnati/pen/MYNGKR

单击第一个按钮以查看其实际效果。

使用addClass函数不会发生CSS转换

1 个答案: