在Vue中創建可重用的 Transition

ue.js中的transition確實很棒。毫無疑問，它們可以非常輕松地讓應用程序栩栩如生，但是通常必須在每個項目中從頭開始編寫它們，甚至還需要引入animate.css之類的CSS庫來使它們功能更強大。

如果我們可以將它們封裝到組件中，并在多個項目中簡單地重用它們，結果會怎樣呢?我們將介紹幾種定義transition的方法，并深入研究如何使它們真正可重用。

原始transition組件和CSS

定義transition的最簡單方法是使用transition·或transition-group組件。這需要為transition定義一個name`和一些CSS。

看起來容易,對吧?然而，這種方法有一個問題。我們不能在另一個項目中真正重用這個transition。

封裝transition組件

如果我們將前面的邏輯封裝到一個組件中，并將其用作一個組件，結果會怎樣呢？

// FadeTransition.vue
<template>
  <transition name="fade">
    <slot></slot>
  </transition>
</template>
<script>
export default {
  
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

// App.vue

<template>
  <div id="app">
    <button v-on:click="show=!show">
      Toggle transition
    </button>
    <fade-transition>
      <div v-if="show" class="box"></div>
    </fade-transition>
  </div>
</template>
<script>...</script>
<style>...</style>

通過在transition組件中提供一個slot，我們幾乎可以像使用基本transition組件一樣使用它。這比前面的例子稍微好一點，但是如果我們想要傳遞其他特定于transition的prop，比如mode或者一些hook，該怎么辦呢

封裝的包裝器transition組件

幸運的是，Vue 中有一個功能，使我們可以將用戶指定的所有額外props和監聽器傳遞給我們的內部標簽/組件。如果你還不知道，則可以通過$attrs訪問額外傳遞的 props，并將它們與v-bind結合使用以將它們綁定為props。這同樣適用于通過$listeners進行的事件，并通過v-on對其進行應用。

「完整事例地址：https://codesandbox.io/s/yjl1wjyoy1?from-embed」

現在，我們可以傳遞普通transition組件可以接受的任何事件和支持，這使得我們的組件更加可重用。但為什么不更進一步，增加通過 prop 輕松定制持續時間的可能性。

顯式持續時間 prop

Vue 為transition組件提供了一個duration prop，然而，它是為更復雜的動畫鏈接而設計的，它幫助 Vue 正確地將它們鏈接在一起。

在我們的案例中，我們真正需要的是通過組件prop控制CSS animation/transition。我們可以通過不在CSS中指定顯式的CSS動畫持續時間，而是將其作為樣式來實現。我們可以借助transition hook來做到這一點，該transition hook與組件生命周期 hook 非常相似，但是它們在過渡所需元素之前和之后被調用。讓我們看看效果如何。

「完整事例地址：https://codesandbox.io/s/j4qnjvmwz9?from-embed」

現在，我們可以控制實際的可見過渡時間，這使我們可重用的過渡變得靈活且易于使用。但是，如何過渡多個元素（如列表項）呢？

Transition group 支持

你想到的最直接的方法可能是創建一個新組件，比如fade-transition-group，然后將當前transition標簽替換為transition-group標簽，以實現 group transition。如果我們可以在相同的組件中這樣做，并公開一個將切換到transition-group實現的group prop，那會怎么樣呢?幸運的是，我們可以通過render函數或component和is屬性來實現這一點。

// FadeTransition.vue

<template>
  <component :is="type"
             :tag="tag"
             enter-active-class="fadeIn"
             leave-active-class="fadeOut"
             move-class="fade-move"
             v-bind="$attrs"
             v-on="hooks">
      <slot></slot>
  </component>
</template>
<script>
export default {
  props: {
    duration: {
      type: Number,
      default: 300
    },
    group: {
      type: Boolean,
      default: false
    },
    tag: {
      type: String,
      default: "div"
    }
  },
  computed: {
    type() {
      return this.group ? "transition-group" : "transition";
    },
    hooks() {
      return {
        beforeEnter: this.setDuration,
        afterEnter: this.cleanUpDuration,
        beforeLeave: this.setDuration,
        afterLeave: this.cleanUpDuration,
        leave: this.setAbsolutePosition,
        ...this.$listeners
      };
    }
  },
  methods: {
    setDuration(el) {
      el.style.animationDuration=`${this.duration}ms`;
    },
    cleanUpDuration(el) {
      el.style.animationDuration="";
    },
    setAbsolutePosition(el) {
      if (this.group) {
        el.style.position="absolute";
      }
    }
  }
};
</script>
<style>
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}
.fade-move {
  transition: transform 0.3s ease-out;
}
</style>

// App.vue

...

<div class="box-wrapper">
  <fade-transition group :duration="300">
    <div class="box"
         v-for="(item, index) in list"
         @click="remove(index)"
         :key="item"
     >
    </div>
  </fade-transition>
</div>

...

「完整事例地址：https://codesandbox.io/s/pk9r5j2257?from-embed」

[文檔中][6]介紹了一個帶有transition-group元素的警告。我們基本上必須在元素離開時將每個項目的定位設置為absolute，以實現其他項目的平滑移動動畫。我們也必須添加一個move-class并手動指定過渡持續時間，因為沒有用于移動的 JS hook。我們將這些調整添加到我們的上一個示例中。

再做一些調整，通過在mixin中提取 JS 邏輯，我們可以將其應用于輕松創建新的transition組件，只需將其放入下一個項目中即可。

Vue Transition

在此之前描述的所有內容基本上都是這個小型 [transition 集合][7]所包含的內容。它有 10 個封裝的transition組件，每個約1kb(縮小)。我認為它非常方便，可以輕松地在不同的項目中使用。你可以試一試:)

總結

我們從一個基本的過渡示例開始，并最終通過可調整的持續時間和transition-group支持來創建可重用的過渡組件。我們可以使用這些技巧根據并根據自身的需求創建自己的過渡組件。希望讀者從本文中學到了一些知識，并且可以幫助你們建立功能更好的過渡組件。

作者：Matt 譯者：前端小智來源：medium 原文：https://levelup.gitconnected.com/vuejs-a40cc3fb4428

css3過渡轉換

css3過渡(transition)允許我們在限定的時間內從一個屬性值轉變到另一個屬性值.

●transition-property:指定要轉換的屬性

●transition-duration:指定轉換發生的持續時間

●transition-timing-function:指定轉換的速度在其持續時間內如何變化

●transition-delay:指定過渡效果的延遲(以秒為單位)

在下面的例子中,我們將transition屬性設置為持續時間為5s的轉換效果.并設置ease-in定時函數,該函數有淡入的效果.

css代碼:

transition:transform 5s ease-in;

過渡效果可以應用于各種css屬性,包括:背景顏色,寬度,高度,不透明度等等.

在下面的例子中,div元素的寬度和高度都是100px,并有一個紅色的背景.我么為width屬性指定一個過渡效果,持續時間為3s.

css代碼:

div.transition{ width:100px; height:100px;background:red;color:white;transition:width 3s; }

div.transition:hover{ width:250px;}

效果如下:

如果你將光標懸停在div元素上,則會從左向右移動.

當光標被移出div元素時,它將逐漸變回原來的樣式.

transition-timing-function屬性指定過渡效果的速度曲線.

它可以有以下值:

ease:動畫開始緩慢,然后加速(默認值)

ease-in:緩慢開始,然后加速,突然停止.

ease-out:快速啟動,但減速停止.

ease-in-out:類似于緩解,但更加微妙的加速和減速.

linear:勻速轉換

cubic-bezier()函數,它允許你在cubic-bezier(立方體-貝塞爾)函數中定義你自己的值.取值范圍為0~1之間.

css代碼:

transition-timing-function:cubic-bezier(0,0,1,1);

二 css3 transform:rotate()

css3中transform(轉換)允許你翻轉,旋轉,縮放和傾斜元素.

transform(轉換)是一種讓元素更改形狀,大小和位置的效果

css3支持2d和3d轉換.

設置15deg的角度旋轉(順時針方向旋轉),css代碼如下:

transform:totate(15deg);

正值,順時針旋轉;負值,逆時針旋轉.

三 css3 transform-origin,translate(),skew()

transition-origin(原點)屬性允許你更改要轉換元素的位置.該屬性的默認值是50% 50%,對應于元素的中間.

在下面的例子中,我們將transform-origin屬性和transform-ratate一起使用.x軸(水平)的原點從左側設定為30%.

y軸(垂直)的原點從上方設定為80%.

css代碼:

div.empty-div{position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}

div.green-div{ padding:50px; position:absolute;background-color:LightGreen;border:2px solid red;transform:rotate(15deg);transform-origin:30% 80%;}

效果如下:

0 0 與左上相同,100% 100%與右下相同.

transform-origin屬性必須與transform屬性一起使用.

translate()方法從當前位置移動一個元素(根據給定的x軸和y軸的參數).正值會將元素

向下推到其默認位置的右側.而負值則會將元素向上并拖至其默認位置的左側.

css代碼:

transform:translate(120px,60px);

skew()通過給元素設置x軸和y軸的傾斜角度值來實現傾斜.

以下例子,沿著x軸將<div>元素傾斜45度

css代碼:

transform:skew(45deg);

-webkit-transform:skew(45deg);

如果沒有指定第二個參數,則它的默認值為零.

四 css3 scale()函數和多重變換

scale()方法根據已設定的高度和寬度參數來增加或減少元素的大小.1代表原始大小,2代表原始尺寸的兩倍,以此類推.

css代碼:

transform:scale(0.7 0.7);

如果只傳遞一個參數,則默認寬度與高度都使用該參數.

一次可以使用多個轉換.比如同時旋轉和縮放元素的大小.對元素應用多個變換,只需要用空格隔開它們.

css代碼:

transform:rotate(35deg) translate(120px);

五 css3關鍵幀與動畫

動畫讓一個元素從一種風格變為另一種風格.

你可以根據需要更改任意數量的css屬性.

關鍵幀將保存元素在特定時間的樣式

@keyframes規則

當你在@keyframes規則中指定css樣式時,動畫將在某些時間從當前樣式逐漸變為新樣式.

要使動畫起作用,必須將動畫綁定到元素.

以下例子,將更改元素的背景顏色三次:動畫完成50%,完成70%,動畫完成100%時.

@keyframes animation-name{ 0% {background-color:red;} 50% {background-color:yellow;} 70% {background-color:green;}

100% {background-color:green;} }

animation-name是為動畫指定的名字,你可以設置成任意的名字.

作為百分比的替代方法,你可以使用from和to關鍵字分別代替0%起始點,100%結束點.

要使動畫起作用,必須將動畫綁定到元素.

在下面的例子中,動畫持續一秒鐘,并將紅色div的背景顏色更改為綠色和藍色

div.animation{ width:100px;height:100px;background-color:red;animation-name:能否;animation-duration:1s;}

@keyframes 能否{ 0% {background-color:red;} 50%{ background-color:green;} 100%{background-color:blue;} }

效果如下:

背景顏色將在1s內自動變化.

animation-name:指定動畫的名字.

animation-duration:指定所選動畫的持續時間.

如果為指定animation-duration屬性,則動畫將不起作用.因為默認值是0.

在CSS中實現一個從上往下的過渡效果，你可以使用transition屬性，并結合transform屬性。以下是一個簡單的例子，演示了如何實現一個元素在鼠標懸停時從上向下移動的過渡效果：

<!DOCTYPE html>

<head>

<style>

.box {

width: 100px;

height: 100px;

background-color: blue;

transition: transform 0.5s ease-in-out;

}

.box:hover {

transform: translateY(50px);

}

</style>

</head>

<body>

</body>

</html>

在這個例子中，.box類定義了一個方框，并指定了一個過渡效果，使得當transform屬性改變時（即鼠標懸停時），它會在0.5秒內完成平滑的從上往下移動50像素的變化。

在線咨詢

上一篇：前端基礎：43道JavaScript面試題，適合查漏
下一篇：為知乎增加快捷鍵

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在Vue中創建可重用的 Transition

原始transition組件和CSS

封裝transition組件

封裝的包裝器transition組件

顯式持續時間 prop

Transition group 支持

Vue Transition

總結

您的項目需求