Question

嘿伙计们我熟悉jQuery但不熟悉javascript。这里我有一个jQuery渲染动画，需要使用javascript完成。我被困住了，坦白说我不知道从哪里开始。这是我的 WORKING FIDDLE 。此示例需要在纯JavaScript中呈现。任何人都可以通过javascript帮助我解决问题。

MARKUP

<div class="clck">Click</div>
<div class="modal">
    <div class="head">Head</div>
</div>

CSS

.modal {
    width: 100px;
    height: 0px;
    position: absolute;
    background: orange;
    bottom: 0;
}
.clck {
    position: absolute;
    padding: 10px 20px;
    border-radius: 5px;
    background: red;
    bottom:0;
    z-index: 2;
    margin:auto;
    cursor: pointer;
}
.head {
    border-bottom: 1px solid black;
    cursor: pointer;
    text-align: center;
    padding: 10px;
}

感谢提前

Answer 1

我会使用javascript来改变类名并使用CSS来执行实际的动画。这个更新的小提琴应该有所帮助，但课程定位如下。

http://jsfiddle.net/hcx9bkub/12/

var c = document.getElementsByClassName('clck')[0];
    c.onclick = function () {
        var m = document.getElementsByClassName('modal')[0];
            m.className = m.className + ' active';
    };

编辑更新指向正确小提琴版本的链接，并更新为使用变量。

如何像jquery一样做纯javascript动画

1 个答案: