Question

我的DOM结构如

<div class="content" data-type="card">
    <i class="expand"></i>
    <div class="article">
        A: This is the main article
    </div>
</div>

我的css动画为

.fullscreen {
    z-index: 9999; position: fixed;
    -webkit-animation: fs-expandHorizontal 300ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards,
                    fs-expandVertical 120ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards;
}


    @-webkit-keyframes fs-expandHorizontal {
        0% { width: 940px; left: 50%; margin-left: -470px; }
        100% { width: 100%; left: 0; margin-left: 0px; }
    }

    @-webkit-keyframes fs-expandVertical {
        0% { height: 560px; }
        100% { height: 100vh; top: 0; }
    }

.restore {
    z-index: 9999; position: fixed;
    -webkit-animation: fs-contractVertical 300ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards,
                        fs-contractHorizontal 120ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards;
 }


    @-webkit-keyframes fs-contractHorizontal {
        0% { width: 100%; left: 0; margin-left: 0px; }
        100% { width: 940px; left: 50%; margin-left: -470px; }
    }

    @-webkit-keyframes fs-contractVertical {
        0% { height: 100vh; top: 0; }
        100% { height: 560px; top: 60px;}
    }

在我的HTML元素上，如果我添加.fullscreen类，它将按预期工作（div动画和扩展）。但是，当我删除.fullscreen并添加.restore课程时，根本就没有动画。

知道我哪里做错了？

UPDATE: 我只复制了基本代码并在这里创建了一个jsfiddle http://jsfiddle.net/cbfgbphf/5/，它似乎工作正常。

所以我有2个CSS文件

<link rel="stylesheet" media="all" href="static/css/media-style.css" />
<link rel="stylesheet" type="text/css" href="static/css/style.css">

根据我上面发布的CSS代码，以下内容位于style.css和

.fullscreen {
    z-index: 9999; position: fixed;
    -webkit-animation: fs-expandHorizontal 300ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards,
                        fs-expandVertical 120ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards;
}


.restore {
    -webkit-animation: fs-contractVertical 120ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards,
                        fs-contractHorizontal 300ms cubic-bezier(0.455, 0.105, 0.445, 0.830) 1 forwards;
}

此部分位于media-style.css

@media (min-width: 1280px) and (max-width: 1440px) {
    .content {
        width: 940px; height: 560px; 
    }


    @-webkit-keyframes fs-expandHorizontal {
        0% { width: 940px; left: 50%; margin-left: -470px; }
        100% { width: 100%; left: 0; margin-left: 0px; }
    }

    @-webkit-keyframes fs-expandVertical {
        0% { height: 560px; }
        100% { height: 100vh; top: 0; }
    }



    @-webkit-keyframes fs-contractHorizontal {
        0% { width: 100%; left: 0; margin-left: 0px; }
        100% { width: 940px; left: 50%; margin-left: -470px; }
    }

    @-webkit-keyframes fs-contractVertical {
        0% { height: 100vh; top: 0; }
        100% { height: 560px; top: 60px;}
    }


}

如果我将上述部分放在style.css文件中，那么它似乎工作正常。

在添加/删除类时遇到CSS动画问题

0 个答案: