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屋！
查看全文
