- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想删除具有出色动画的 div
,但我不知道如何执行此操作。
所以我这样做fiddle例如:
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
我看到一个很好的例子here
但是当一个 div 被删除时,她就会被剪切,并且它们只是下一个 div 的动画。
有什么想法吗?
终于解决了:Jsfiddle
最佳答案
自从您删除元素
后,它就无法再动画
了。您可以通过类进行动画处理,并在 transitionend
上删除该元素。例如这样:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
关于javascript - 删除div并带有漂亮的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31898651/
在通过REST Request Body方法发出搜索请求时,例如 GET /bank/_search { "query": { "match_all": {} }, "sort": [
有没有办法检测用户是否停止滑动?也许 bij 鼠标输入检查之类的。我尝试在 onSliderChange 事件中使用鼠标 isButton0Release 和 hasFocus 来检查用户是否停止滑动
(来源:google.com) 最近,我发现我的应用程序中显示的汉字相当难看。 我想我应该让它们“消除锯齿”。但是,我如何在 Java 中做到这一点? 仅供引用,我没有明确选择要在 GUI 应用程序中
我正在创建一个网站,根据某些条件(即是否登录、是否填写表格等),不同页面的外观可能会有很大差异。这使得需要在不同的时间输出不同的html block 。 但是,这样做会使我的 php 代码看起来很糟糕
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
如果我有一个类包含例如几个将用向量填充的槽,那么问题通常会出现。如果我想让这个类的对象或多或少透明,我会为它实现 print-object。在这里我遇到了问题: 如果我在一行中打印所有内容,REPL
我有一个允许上传到我网站的文件扩展名列表。 我用 jQuery Validation plugin 检查它们. 如果他们选择了不受支持的扩展程序,我会显示一条错误消息。 看起来像 var msg =
在一个本身嵌套在一个或多个父数组/结构/union 中的数组/结构/union 中读取多个数字/字符串的最佳方法是什么? 没有临时变量的第一个例子: printf("%d %d\n", a[9][3]
我是 AngularJS 的新手。我目前在为我的观点编写漂亮的 url 时遇到问题。我已经设置了 $locationProvider.html5Mode(true);删除 #从地址栏中显示的网址。但是
我有一个带有 ElasticSearch 的自动完成 jquery 功能。输入第一个字母时出现以下错误。 跨源请求被阻止:同源策略不允许读取 http://localhost:9200/test12/
我是一名优秀的程序员,十分优秀!