Velocity.js在动画后清除默认值
Velocity.js clearing default values after animation
我在页面上有一些元素,我想在其中设置动画以查看,但在它们设置动画后,我想将它们上的进一步动画推迟到CSS(通过更改类)。。。我发现Velocity将我所有的动画属性都保留在style=
标记中,并使CSS转换变得不可能。
我下面有一个解决方案,但在完成时重置CSS似乎很不确定,我想知道是否有更好的方法?
// first use CSS to hide the element and squish it
$el.css({
width: 0,
left: "-10px",
opacity: 0,
marginRight: 0,
transition: "none"
})
// now animate the width and margin (do this first
// so there's a little gap between existing elements
// before we fade in new element.
.velocity({
width: width,
marginRight: margin
}, {
queue: false,
duration: 230
})
// then fade and move in the new element,
// but this is the iffy bit when it completes
// I have to unset all the styles I've animated?
.velocity({
left: 0,
opacity: 1
}, {
queue: false,
duration: 100,
delay: 130,
complete: function(els) {
$(els).css({
width: "",
left: "",
opacity: "",
marginRight: "",
transition: ""
});
}
});
通常,您希望动画引擎保持样式内联;否则,最终值将弹出,因为它们在删除时被样式表覆盖。
您也可以执行$(els).attr("style", "");
来清除所有样式。
相关文章:
- 单击jquery清除输入值
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- jquerydatetimepicker日期和时间应在框默认值中,而无需单击框
- 如果值为空,如何设置输入的默认值?jQuery
- 骨干模型默认值-todos.js示例中不必要的代码
- jquery日期选择器年份范围默认值
- Html5输入属性的默认值,如最小值、最大值、大小等
- 根据两个下拉列表的默认值禁用按钮
- 如何创建具有默认值的JavaScript对象字段?(AngularJS模型相关)
- Angularjs-设置不带ng选项的select的默认值
- jQuery Datepicker从日期开始设置默认值
- 如何设置浏览器打开的文件对话框的文件名(一些默认值)
- JQuery BlockUI鼠标加载光标没有't在Google Chrome中返回默认值
- 在发送之前,点击按钮清除多个输入[类型=文本]默认值
- 清除输入,模糊文本区域和默认值(如果字段为空)
- Velocity.js在动画后清除默认值
- 将JS函数转换为jQuery-(输入字段清除默认值)
- 清除模型并重置为默认值时,防止模型集“更改”事件
- 如何使用AngularJS将输入框设置为清除焦点上的默认值?
- 如何在用户开始键入(jquery)时清除表单的默认值