css转换不工作对话框 [英] css transition not working on dialog box

问题描述

我想弄清楚为什么此代码中的对话框的淡入淡出和无法正常工作。

I am trying to figure out why the fade in and out of a dialog box in this code is not working properly.

我想要做的是有点击淡入和淡出。但我试图做这个淡入/出与CSS只是。
当我手动删除控制台中的类活动效果工作，但不是当我实际点击链接（打开对话框）。

What I'm trying to do is having a fade in and out on click. But I am trying to do this fade in/out with CSS only though. When i remove manually the class "active" in the console the effect works, but not when I actually click on the link (to open the dialog box).

这是我的代码

CSS：

.modal {
    display: block;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-image: url('pixel.png');
    opacity: 1;
}
.modal-dialog {
    max-width: 600px;
    background-color: white;
    z-index: 99;
    min-height: 200px;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.modal-dialog .active {
    opacity: 1;
    background-color: #ffffff;
    border: 1px solid #999;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

我的JS（以防万一）：

My JS (just in case):

$('body').on('click', '[data-modal]', function (e) {
        e.preventDefault();
        $('body').addClass('modal-open');
        $('body').append("<div class='modal'></div>").addClass('active');
        $('.modal').append("<div class='modal-dialog'></div>")
        $('.modal-dialog').html("<div class='modal-inner generic-content'></div>").addClass('active');

推荐答案

Transition需要数值才能在2条规则语句之间设置步长
您应该使用：opacity而不是显示：
http://jsfiddle.net/bJz7R/1/

Transition needs numeric value in order to set steps in between 2 rules statement. You should use : opacity instead display: http://jsfiddle.net/bJz7R/1/

$('a.click-me').click(function(){
   $('#open').css('opacity','1');
});

并替换为CSS：

display:none;

由

opacity:0;

这篇关于css转换不工作对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！