html提示信息框淡入淡出效果

用方法：

調(diào)用initMessagebox(“要顯示的文字”)方法即可

<!--信息框-->
<div id="messagebox"></div>
<!--Load Jquery-->
 <script src="js/jquery-1.11.3.min.js"></script>
 <script>
 /*提示信息框動態(tài)效果*/
 var messageboxT;
 var top1 = 10;
 var opacity = 0;
 //初始化數(shù)據(jù)
 function initMessagebox(info) {
 top1 = 10;
 opacity = 0;
 opacity1 = 1;
 $("#messagebox").html(info);
 $("#messagebox").css({ 'display': 'block' });
 appearMessagebox();
 }
 //出現(xiàn)信息框
 function appearMessagebox() {
 top1 += 1;
 opacity += 0.05;
 if (opacity < 1) {
 messageboxT = setTimeout("appearMessagebox()", 15);
 }
 else {
 disappearMessagebox();
 }
 $("#messagebox").css({ 'top': String(top1) + 'px' });
 $("#messagebox").css({ 'opacity': String(opacity) });
 }
 //隱藏信息框
 function disappearMessagebox() {
 opacity -= 0.05;
 if (opacity > 0.05) {
 messageboxT = setTimeout("disappearMessagebox()", 40);
 }
 else {
 opacity = 0;
 $("#messagebox").css({ 'display': 'none' });
 }
 $("#messagebox").css({ 'opacity': String(opacity) });
 }
 </script>

用到的css

家好，很高興又見面了，我是"高級前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動力。

前言

動畫是體驗的核心，比如引導(dǎo)用戶從一次交互到下一次交互，但網(wǎng)頁的流暢動畫還存在一些不足，其中包括設(shè)置進(jìn)入和退出動畫的能力，以及為對話框和彈出窗口等可關(guān)閉元素平滑往返頂層的動畫效果。

為了填補(bǔ)這些空白，Chrome 116 和 117 包含了四個新的 Web 平臺功能，可實現(xiàn)離散屬性的平滑動畫和過渡。這四項新功能包括：

能夠在關(guān)鍵幀時間軸上（keyframe timeline）對display和content-visibility進(jìn)行動畫處理（從 Chrome 116 開始）。
帶有allow-discrete關(guān)鍵字的transition-behavior屬性可以啟用離散屬性的轉(zhuǎn)換，例如：display（來自Chrome 117）。
@starting-style 規(guī)則用于將入口效果（entry effects）從 display: none 動畫化到頂層（從 Chrome 117 開始）。
overlay 用于控制動畫期間頂層行為（top-layer behavior）的疊加屬性（來自 Chrome 117）

1.在keyframes中顯示animations

從 Chrome 116 開始，可以在關(guān)鍵幀規(guī)則中使用 display 和 content-visibility。然后，它們將在關(guān)鍵幀出現(xiàn)時交換，不需要其他額外配置：

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

上面的示例在 0.5 秒的時間內(nèi)將 opacity 設(shè)置為 0，然后將 display 設(shè)置為 none。此外，forwards 關(guān)鍵字確保動畫保持在其最終狀態(tài)，以便應(yīng)用到的元素始終保持 display: none 和opacity: 0。

然而，過渡無法創(chuàng)建非常復(fù)雜的動畫，例如以下示例：

.card {
  animation: spin-and-delete 1s ease-in forwards;
}

@keyframes spin-and-delete {
  0% {
    transform: rotateY(0);
    filter: hue-rotate(0);
  }
  80% {
    transform: rotateY(360deg);
    filter: hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

spin-and-delete 動畫是退出動畫。首先，卡片將在 y 軸上旋轉(zhuǎn)，進(jìn)行色調(diào)旋轉(zhuǎn)，然后在時間線的 80% 處，將其不透明度從 1 轉(zhuǎn)換為 0。最后，卡片從 display: block 切換到 display: none。

對于退出動畫，可以為動畫設(shè)置觸發(fā)器，而不是將它們直接應(yīng)用于元素。例如，通過將事件偵聽器附加到觸發(fā)類來應(yīng)用動畫的按鈕，如下所示：

.spin-out {
   animation: spin-and-delete 1s ease-in forwards;
}

document.querySelector('.delete-btn').addEventListener('click', () => {
 document.querySelector('.card').classList.add('spin-out');
})

上面的示例現(xiàn)在的最終狀態(tài)為 display:none。在很多情況下，需要進(jìn)一步刪除 DOM 節(jié)點并設(shè)置超時，以便動畫首先完成。

2.轉(zhuǎn)換離散動畫

與使用關(guān)鍵幀對離散屬性進(jìn)行動畫處理不同，要使用過渡離散屬性，開發(fā)者需要使用 allow-discrete。

transition-behavior屬性

allow-discrete 模式讓離散動畫成為可能，可以將其作為 transition-behavior 的值，transition-behavior接受 normal 或者 allow-discrete 兩個屬性。

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
  opacity: 0;
  display: none;
}

transition 簡寫也是一樣，可以省略該屬性并在每個 transition 的末尾使用 allowed-discrete 關(guān)鍵字。

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}
.card.fade-out {
  opacity: 0;
  display: none;
}

如果要對多個離散屬性進(jìn)行動畫處理，則需要在要對其進(jìn)行動畫處理的每個屬性后面包含allow-discrete。例如：

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

3.入口動畫的@starting-style值

到目前為止，本文已經(jīng)介紹了退出動畫，要創(chuàng)建進(jìn)入動畫，需要使用 @starting-style 規(guī)則。使用 @starting-style 應(yīng)用瀏覽器在頁面上打開元素之前可以查找的樣式，這是“before-open”狀態(tài)。

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

4.動畫元素進(jìn)出頂層

要將元素動畫化到頂層或從頂層動畫化，請在“打開”狀態(tài)下指定@starting-style，以告訴瀏覽器從何處開始動畫化。對于對話框，打開狀態(tài)由 [open] 屬性定義, 對于彈出窗口，請使用 :popover-open 偽類。

一個簡單的對話框示例如下所示：

/*   0. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

/*   1. IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   2. EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

在下一個例子中，進(jìn)入和退出效果是不同的。通過從視口底部向上動畫進(jìn)入，從視口頂部退出效果。它還使用嵌套 CSS 編寫，以實現(xiàn)更多視覺封裝。

對彈出窗口進(jìn)行動畫處理時，請使用 :popover-open 偽類而不是之前使用的 open 屬性。

.settings-popover {
  &:popover-open {
    /*  0. BEFORE-OPEN STATE  */
    /*  Initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }
    
    /*  1. IS-OPEN STATE  */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;
  }
  
  /*  2. EXIT STATE  */
  /*  Initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateY(-50px);
  opacity: 0;
  
  /*  Enumerate transitioning properties, 
      including display and allow-discrete mode */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

overlay屬性

最后，要從頂層淡出彈出框或?qū)υ捒颍垖verlay 屬性添加到過渡列表中。 popover 和dialog 將跳過剪輯和變換，并將內(nèi)容放在頂層。

如果不過渡疊加，元素將立即返回到被剪切、變換和覆蓋的狀態(tài)，并且看不到過渡發(fā)生。

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

相反，應(yīng)在transition 和 animation中包含overlay，以便將疊加層與其余功能一起進(jìn)行動畫處理，并確保在制作動畫時其保留在頂層，這看起來會平滑得多。

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

視圖轉(zhuǎn)換注意事項

如果要更改 DOM，例如在 DOM 中添加和刪除元素，平滑動畫的另一個很好的解決方案是視圖轉(zhuǎn)換，以下是使用視圖轉(zhuǎn)換構(gòu)建的上述示例中的兩個。

在第一個演示中，視圖過渡將處理過渡，而不是設(shè)置 @starting-style 和其他 CSS 轉(zhuǎn)換。視圖轉(zhuǎn)換設(shè)置如下：

首先，在 CSS 中，為每張卡指定一個單獨的視圖轉(zhuǎn)換名稱。

.card-1 {
  view-transition-name: card-1;
}

.card-2 {
  view-transition-name: card-2;
}

/* etc. */

然后，在 JavaScript 中，將 DOM 變化（在本例中為移除卡片）包裝在視圖轉(zhuǎn)換中。

deleteBtn.addEventListener('click', () => {
  // Check for browser support
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      // DOM mutation
      card.remove();
    });
  } 
  // Alternative if no browser support
  else {
    card.remove();
  }
})

參考資料

https://developer.chrome.com/blog/entry-exit-animations/

https://www.youtube.com/watch?app=desktop&v=lsYlEzuXq-w

eb開發(fā)人員和MVB展示了他如何在React中創(chuàng)建一個組件，使您可以使用CSS和React淡入緩存加載的圖像。

假設(shè)你想在你的網(wǎng)站上加載一些圖片。你不希望他們只是彈出存在，嚇倒用戶。效果很好，效果更好。

這是問題：沒有好的預(yù)制React組件。或者我吮吸找到它。

有一個react-lazyload，它為你做了一個懶惰的加載部分。它使組件不會掛載到DOM中，直到用戶真正看到它們。

這有助于加快您的網(wǎng)站加載速度。用戶不需要加載大圖像，直到用戶可以看到它們。

但是，默認(rèn)的體驗可能會令人震驚。當(dāng)圖像最終加載時，他們只是彈出視圖。

react-lazyload提供了一個淡入的例子，但它已經(jīng)過時了，不適用于現(xiàn)代圖書館。而且使用起來很麻煩。

所以我建立了一個通用FadeIn組件。我會開放它，但它需要一些波蘭首先，我希望你的意見，如何做得更好。

該組件只有40行代碼。很簡單。

class FadeIn extends React.Component {
state = {
loaded: false ,
} ;
onLoad = ( ) => this.setState ( { loaded: true } ) ;
render( ) {
const { height, children } = this.props ,
{ loaded } = this.state ;
return (
<LazyLoad height= {height} offset= { 150 } >
<Transition in = {loaded} timeout= {duration} >
{state =>
<div style= { { ...defaultStyle , ...transitionStyles [state] } } >
{children( this.onLoad ) }
</div> }
</Transition>
</LazyLoad>
) ;
}
}
FadeIn.propTypes = {
height: PropTypes.number ,
children: PropTypes.func ,
} ;

FadeIn保持本地loaded狀態(tài)以跟蹤顯示內(nèi)容。

false意思是“保持透明”，

true意思是“完全不透明”。

它使用react-lazyload的LazyLoad組件來處理延遲加載的部分，并且Transition從react-transition-group來驅(qū)動CSS漸變來淡入。這是自正式的淡入淡出的例子以來改變了很多的部分。

使用兒童渲染功能的方法，你可以要求FadeIn渲染任何你想要的。它被包裝在處理淡入淡出效果的div中。

所有你需要做的就是觸發(fā)onLoad回調(diào)，一旦你的內(nèi)容準(zhǔn)備就緒。當(dāng)你的圖像完成加載例如。

你渲染<FadeIn>，給它一個高度，所以事情不會跳來跳去，并通過一個onLoad回調(diào)的兒童功能。當(dāng)您準(zhǔn)備好觸發(fā)轉(zhuǎn)換時，您可以調(diào)用onLoad并FadeIn執(zhí)行它的操作。

你知道onLoad所有的瀏覽器支持一個內(nèi)置的DOM回調(diào)嗎？我不知道。

onLoad是非常重要的，因為如果沒有它，F(xiàn)adeIn過渡可能會在圖像甚至落入管道之前結(jié)束。這是我面臨的第一個問題，當(dāng)我livecoded此。

建議？

我想開源這個。我知道這很簡單，但是可以為他們節(jié)省一個小時的時間。這是值得的，對吧？

還有什么需要做的？我應(yīng)該怎樣命名呢？你會用它嗎？

在線咨詢

上一篇：html表格實現(xiàn)固定table的表頭和第一列內(nèi)容
下一篇：一個易學(xué)易用高效便捷的MVC和ORM框架

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商