如何在「使用CSS或jQuery之後」設置動畫效果

Question

我有一個類似如下的菜單：Fiddle。

$(".squ").click(function() { 
 
    $('.pen').addClass('squ'); 
 
    $('.pen').removeClass('pen'); 
 
    $(this).removeClass("squ"); 
 
    $(this).addClass("pen"); 
 
});

.squ { 
 
    background-color: #0266B4; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
} 
 
.squ:hover { 
 
    background-color: #419EE6; 
 
} 
 
.squ p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
} 
 
.sec1 .squ { 
 
    cursor: pointer; 
 
} 
 
.pen { 
 
    background-color: #419EE6; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
} 
 
.pen p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
    cursor: default; 
 
} 
 
.pen:after { 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 11px solid transparent; 
 
    border-left: 22px solid #419EE6; 
 
    position: absolute; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="pen"> 
 
    <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p> 
 
</div> 
 

 
<div class="squ"> 
 
    <p id="qin" onclick="checkDisableCbs(this.id);">apple</p> 
 
</div>

當我2班之間切換列表項的一個點擊。 所選的人獲得一個類（.pen），該類具有看起來像箭頭的:after（CSS）。

我怎樣才能動畫它，就好像它是走出去的div（從左至右）

Answer 1

你需要擁有它定義。然後使用position進行動畫處理。 display和類似的東西不能動畫（見CSS Animatable Properties）。另外你正在嘗試做的事情類似於從display: none到display: block。

所以我在做什麼這裏是：

1. 變化.pen p::after到p::after與z-index: -1和right: 15px，值比其寬度。
2. 將right屬性設置爲right: 15px;或將其正確匹配。
3. 更正了top: 0;屬性。
4. 要使此始終工作，請將事件委託給可能的靜態父級。您正在分配到class，其中點擊發生了變化。所以它是非靜態。

工作摘錄

$(document).on("click", ".squ", function() { 
 
    $('.pen').addClass('squ'); 
 
    $('.pen').removeClass('pen'); 
 
    $(this).removeClass("squ"); 
 
    $(this).addClass("pen"); 
 
});

.squ { 
 
    background-color: #0266B4; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
} 
 

 
.squ:hover { 
 
    background-color: #419EE6; 
 
} 
 

 
.squ p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
} 
 

 
.sec1 .squ { 
 
    cursor: pointer; 
 
} 
 

 
.pen { 
 
    background-color: #419EE6; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
} 
 

 
.pen p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
    cursor: default; 
 
} 
 

 
p::after { 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 11px solid transparent; 
 
    border-left: 22px solid #419EE6; 
 
    position: absolute; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
    right: 15px; 
 
    z-index: -1; 
 
    top: 0; 
 
} 
 

 
.pen p::after { 
 
    right: -20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="pen"> 
 
    <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p> 
 
</div> 
 
<div class="squ"> 
 
    <p id="qin" onclick="checkDisableCbs(this.id);">apple</p> 
 
</div>