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

用方法：

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

<!--信息框-->
<div id="messagebox"></div>
<!--Load Jquery-->
 <script src="js/jquery-1.11.3.min.js"></script>
 <script>
 /*提示信息框動態效果*/
 var messageboxT;
 var top1 = 10;
 var opacity = 0;
 //初始化數據
 function initMessagebox(info) {
 top1 = 10;
 opacity = 0;
 opacity1 = 1;
 $("#messagebox").html(info);
 $("#messagebox").css({ 'display': 'block' });
 appearMessagebox();
 }
 //出現信息框
 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

家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。

前言

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

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

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

1.在keyframes中顯示animations

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

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

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

上面的示例在 0.5 秒的時間內將 opacity 設置為 0，然后將 display 設置為 none。此外，forwards 關鍵字確保動畫保持在其最終狀態，以便應用到的元素始終保持 display: none 和opacity: 0。

然而，過渡無法創建非常復雜的動畫，例如以下示例：

.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 軸上旋轉，進行色調旋轉，然后在時間線的 80% 處，將其不透明度從 1 轉換為 0。最后，卡片從 display: block 切換到 display: none。

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

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

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

上面的示例現在的最終狀態為 display:none。在很多情況下，需要進一步刪除 DOM 節點并設置超時，以便動畫首先完成。

2.轉換離散動畫

與使用關鍵幀對離散屬性進行動畫處理不同，要使用過渡離散屬性，開發者需要使用 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 關鍵字。

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

如果要對多個離散屬性進行動畫處理，則需要在要對其進行動畫處理的每個屬性后面包含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值

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

/*  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.動畫元素進出頂層

要將元素動畫化到頂層或從頂層動畫化，請在“打開”狀態下指定@starting-style，以告訴瀏覽器從何處開始動畫化。對于對話框，打開狀態由 [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;
}

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

對彈出窗口進行動畫處理時，請使用 :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屬性

最后，要從頂層淡出彈出框或對話框，請將overlay 屬性添加到過渡列表中。 popover 和dialog 將跳過剪輯和變換，并將內容放在頂層。

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

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

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

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

視圖轉換注意事項

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

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

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

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

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

/* etc. */

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

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開發人員和MVB展示了他如何在React中創建一個組件，使您可以使用CSS和React淡入緩存加載的圖像。

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

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

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

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

但是，默認的體驗可能會令人震驚。當圖像最終加載時，他們只是彈出視圖。

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

所以我建立了一個通用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狀態以跟蹤顯示內容。

false意思是“保持透明”，

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

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

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

所有你需要做的就是觸發onLoad回調，一旦你的內容準備就緒。當你的圖像完成加載例如。

你渲染<FadeIn>，給它一個高度，所以事情不會跳來跳去，并通過一個onLoad回調的兒童功能。當您準備好觸發轉換時，您可以調用onLoad并FadeIn執行它的操作。

你知道onLoad所有的瀏覽器支持一個內置的DOM回調嗎？我不知道。

onLoad是非常重要的，因為如果沒有它，FadeIn過渡可能會在圖像甚至落入管道之前結束。這是我面臨的第一個問題，當我livecoded此。

建議？

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

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

在線咨詢

上一篇：html表格實現固定table的表頭和第一列內容
下一篇：一個易學易用高效便捷的MVC和ORM框架

您的項目需求

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

整合營銷服務商