$("<div class='column column-hiding'>Content</div>")
.appendTo(container)
.removeClass("column-hiding");
还尝试了:
$("<div class='column'>Content</div>")
.appendTo(container)
.addClass("column-showing");
.column {
transform: translateX(0%);
transition: all 0.3s ease-out;
}
.column-hiding {
transform: translateX(-100%);
transition: all 0.3s ease-out;
}
或
.column {
transform: translateX(-100%);
transition: all 0.3s ease-out;
}
.column-showing {
transform: translateX(0%);
transition: all 0.3s ease-out;
}
这样,它会立即显示列。此方法在使用
setTimeout
延迟,但是有没有其他选项可以用来确定应该添加/删除类的时间?我还试着添加一个
transition-delay
注意:我使用的是jquery3。
**编辑**
下面是一个片段:
// this animates instantly
$("<div class='column column-hiding'>Content</div>")
.appendTo($("#container"))
.removeClass("column-hiding");
// this is working
var column = $("<div class='column col2 column-hiding'>Content</div>")
.appendTo($("#container"));
setTimeout(function(){
column.removeClass("column-hiding");
}, 500);
#container {
width: 100px;
height: 300px;
background: silver;
overflow: hidden;
}
.column {
transform: translateX(0%);
transition: all 0.3s ease-out;
background: blue;
width: 100px;
height: 100px;
}
.column-hiding {
transform: translateX(-100%);
transition: all 0.3s ease-out;
}
.col2 {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
