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

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

 

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

 

.con {
	width: 95%;
	margin: 32px auto auto auto;
	background-color: #FFFFFF;
	text-align: center;
}

.con>div {
	display: flex;
	justify-content: space-between;
	width: 92%;
	margin: 0 auto;
	border-bottom: #EEEEEE solid 1px;
}

.con>.choose-city>div {
	text-align: center;
  position: relative;
}

.con>.choose-city>.exchange>img {
	width: 32px;
	height: 32px;
	margin-top: 40px;
}

.con>.choose-city>div>p:first-of-type {
	color: #999999;
	font-size: 14px;
	margin: 15px auto;
}

.con>.choose-city>.leave>p:last-of-type,
.con>.choose-city>.go>p:last-of-type {
	color: #333;
	font-size: 20px;
  margin:  15px auto 5px auto;
	position: relative;
	transition: all 1s;
	right: 0;
	top: -10px;
  display: inline-block;
}
.con>.choose-city>.leave>p:last-of-type {
	left: 0;
}

.con>.change>.leave>p:last-of-type {
	position: relative;
	left: 270px;
	top: -10px;
  transition: all 1s;
}

.con>.change>.go>p:last-of-type {
	position: relative;
	right: 270px;
	top: -10px;
	transition: all 1s;
}

 

 

// 切换往返城市
$("#exchange-img").click(function() {
    $(".choose-city").toggleClass("change");
    //把choose-city的class和change交换
});

 

即可实现，我现在赶着下班就先不说了，明天，或者今天晚上再补充