css float不能支持transition吗
本文介绍了css float不能支持transition吗的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
支付宝那个买机票火车票那,有一个交换地点的按钮 交换过程有过度效果。自己写了下发现float好像不能实现过度阿
<!DOCTYPE html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
#left {
float: left;
transition: all 0.75s;
}
#right {
float: right;
transition: all 0.75s;
}
#blo {
background: pink;
text-align: center;
position: relative;
width: 200px;
}
#btn {
display: inline;
margin: 0 auto;
}
</style>
<body>
<div id="blo">
<span id="left">上海</span>
<button id="btn" onclick="flow()">Change</button>
<span id="right">北京</span>
</div>
<script>
function flow(){
var lt = document.getElementById("left");
var rt = document.getElementById("right");
var lx = getComputedStyle(lt, null)["float"];
lx == "left" ? lt.style.cssFloat = "right" : lt.style.cssFloat = "left";
var rx = getComputedStyle(rt, null)["float"];
rx == "right" ? rt.style.cssFloat = "left" : rt.style.cssFloat = "right";
}
</script>
</body>
</html>
解决方案
float
样式是状态样式,也就是说,它只表示状态,非左即右。对于状态样式transition
是不生效的。不过,建议你可以使用绝对定位+left
或者right
的方式,由于left
和right
不是状态样式,所以可以使用transition
。
这篇关于css float不能支持transition吗的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文