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

Hero_rong

于 2018-11-08 18:06:42 发布

阅读量1.4k

点赞数

分类专栏： h5 文章标签： css js h5 transition toggleClass

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/83865306

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

只要利用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>

最低0.47元/天解锁文章