火车票飞机票，点击切换按钮切换出发城市和到达城市

最新推荐文章于 2024-12-26 12:30:16 发布

原创

最新推荐文章于 2024-12-26 12:30:16 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #h5 #transition #toggleClass

本文介绍如何通过CSS transition和JS toggleClass方法实现出发城市与到达城市的切换，点击中间图标时，城市间伴有动画效果。详细实现步骤将在后续补充。

如图，点击中间的切换图标，切换左右两边的城市，并且带有动画效果

只要利用css的特性transition和js的方法toggleClass就可以啦，具体操作如下：

<div class="con">
    <div class="choose-city">
        <div class="leave">
            <p>出发城市</p>
            <p>北京</p>
        </div>
        <div class="exchange">
            <img id="exchange-img" src="../../img/trainTicket/train-icon.png">
        </div>
        <div class="go">
            <p>到达城市</p>
            <p>上海</p>
        </div>
    </div>
</div>