vue動畫效果配置

有兩種方式:

• 一種是css方式

需要注意 4 個(CSS)類名在 enter/leave 的過渡中切換:

v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成之后移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成之后移除。

一般的使用方式是:
在html里面用transition包裹起來,然后建立一個name,這個name對應css的class名字的前綴,例如這里name是fade,class就是fade前綴命名

html代碼

<transition name="fade"> </transition>

css代碼

&.fade-enter-active, &.fade-leave-active &.fade-enter, &.fade-leave-active

總的來說:在enter里面會代表狀態從沒有到有的變化,在leave里面會代表狀態從有到沒有的變化,在使用的時候可以按照需要使用,需要考慮好動畫的變化再開始寫代碼

• 一種是js鉤子的方式

methods: {// --------// 進入中// --------beforeEnter: function (el) {// ...},// 此回調函數是可選項的設置// 與 CSS 結合時使用enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 離開時// --------beforeLeave: function (el) {// ...},// 此回調函數是可選項的設置// 與 CSS 結合時使用leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...} }

一般的使用方式是

<transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"> </transition>

通過綁定js方法來實現

總的來說:js鉤子會更加細膩,會在變化的過程中也加入一個鉤子管理變化,其他跟css方式動畫差不多

詳情參考:官網

彈層和css sticky footer原理

css sticky footer解釋:如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；如果內容足夠長時，頁腳塊會被內容向下推送。
詳細參考:

這里主要使用clearfix這個類的偽類來完成.

原理簡述如下:

• 在IE6, 7下zoom: 1會觸發hasLayout，從而使元素閉合內部的浮動。

• 在標準瀏覽器下，.clearfix:after這個偽類會在應用到.clearfix的元素后面插入一個clear: both的塊級元素，從而達到清除浮動的作用。

• 在需要清除浮動的時候，只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了

• 防止Collapsing margins(外邊距折疊)

• 保證跨瀏覽器的兼容性

相關代碼如下:

.clearfix:before, clearfix:after {content: "."; display: block; clear: both; visibility: hidden;line-height: 0; //行高為0height: 0; //高度為0font-size:0; //字體大小為0 }.clearfix { *zoom:1;} //這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。

備注:

• zoom: 1 為了兼容 IE6/7,在IE6, 7下zoom: 1會觸發hasLayout，從而使元素閉合內部的浮動。

• :before 用來防止 top-margin collapse 和保證當 IE6/7 應用 zoom:1 時的是視覺一致性

• :after 用來清除浮動

  • visibility: hidden 可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已

  • clear: both 清除左右兩邊浮動

  • display: block需要將元素轉為塊級元素才可以實現效果,inline-block也可以

  • content: "." 內容為“.”就是一個英文的句號而已。也可以不寫。

  • line-height: 0行高為0,設置這些主要是為了避免一些占用位置或者間隔的問題

  • height: 0高度為0,同上

  • font-size:0 字體大小為0,同上

另外需要注意的是避免Collapsing margins(外邊距壓扁)
有兩種情況會引起 Collapsing margin:

父子元素(不一定是直接父子)之間會發生 margin-top 和 margin-bottom 的折疊 (如果之間沒有 border、padding、inlne-content、height、min-height、max-height 分割的話) 這篇討論 http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work 很好的演示了這點

鄰近元素同時設置margin,前面的margin-bottom 和后面的margin-top融合取最大的

所以這里能夠實現避免Collapsing margins是因為

• 父子的話,給父元素添加.clearfix

• 緊鄰的話,給前一個元素添加.clearfix

這樣主要利用 :before psudo-element 給元素內部前面添加一個空的元素 display:block 保證它是一個BFC(BFC可以隔斷外邊距折疊)

課程里面使用

因為clearfix是一個比較常用的class,所以在base.styl里面添加,方便其他組件調用

.clearfixdisplay: inline-block&:before, &:aftercontain: ''height: 0line-height: 0clear: bothvisibility: hidden

• 這里沒有去兼容ie6,7,因為移動端基本不包含這些瀏覽器

• 使用inline-block是因為做的是行內塊處理

在Header.vue里面使用

<div class="detail"><div class="detail-wrapper clearfix"></div><div class="detail-close"></div></div>

• 先用一個div包裹其需要做css sticky的內容,如detail的div

• 然后footer是detail-close按鈕,而需要顯示并且要持續撐開的內容塊是detail-wrapper,那么在detail-wrapper上添加一個clearfix 的class,就會在這個元素后面使用after的偽類生成內容,從而不斷推開footer

參考地址:

• http://nicolasgallagher.com/micro-clearfix-hack/

• clearfix 引發的思考

• css用clearfix清除浮動

總結

以上是生活随笔為你收集整理的vue动画效果配置和弹层css sticky footer的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。