动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?

代码：

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background-color: #00B83F;
}
.flag{
position: fixed;
width: 1px;
height: 100%;
background-color: red;
left: 400px;
top:0;
}
.btn{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: rgba(0,0,0,.4);
}
.main{
width: 300px;
height: 300px;
background-color: #ccc;
animation: move 3s 2;
}
@keyframes  move{
from{
transform: translateX(0);
}
to{
transform: translateX(100px);
}
}
</style>
</head>
<body>
<div class="box">
<div class="main"></div>
</div>
<div class="flag"></div>
<div class="btn">
<button>显示</button>
<button>隐藏</button>
</div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 显示
$('button:eq(0)').click(function(){
$('.box').show();
});
// 隐藏
$('button:eq(1)').click(function(){
$('.box').hide();
});
</script>
</body>
</html>

经过测试:

每次在切换显示父元素时，子元素都会重新开始执行动画

转载于:https://blog.51cto.com/11871779/2398923

动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?相关推荐

html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
点击切换div 的隐藏与显示
点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式 ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...
Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序
** vue组件生命周期 ** 一个组件从创建到销毁的整个过程就是生命周期生命周期函数(钩子函数) vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些 ...
css隐藏状态,CSS元素隐藏和显示
动态的隐藏和显示: // 隐藏元素 document.getElementById("div").style.visibility = "hidden"; // ...
html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态
需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...

动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?

动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?相关推荐

最新文章

热门文章