如圖，點選中間的切換圖示，切換左右兩邊的城市，並且帶有動畫效果

只要利用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交換
});

即可實現，我現在趕著下班就先不說了，明天，或者今天晚上再補充