vue動畫效果配置和彈層css sticky footer

vue動畫效果配置

有兩種方式:

• 一種是css方式

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

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

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

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

4. 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;    //行高爲0
    height: 0;     //高度爲0
    font-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:

1. 父子元素(不必定是直接父子)之間會發生 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 很好的演示了這點

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

因此這裏可以實現避免Collapsing margins是由於

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

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

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

課程裏面使用

由於clearfix是一個比較經常使用的class,因此在base.styl裏面添加,方便其餘組件調用

.clearfix
  display: inline-block
  &:before, &:after
    contain: ''
    height: 0
    line-height: 0
    clear: both
    visibility: 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清除浮動