整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          JavaScript 箭頭函數(shù)特點(diǎn)與用法詳解

          家好,很高興又見面了,我是姜茶的編程筆記,我們一起學(xué)習(xí)前端相關(guān)領(lǐng)域技術(shù),共同進(jìn)步,也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā),您的支持是我不斷創(chuàng)作的動(dòng)力

          我們來聊聊箭頭函數(shù)(就是下面這個(gè)東西)!箭頭函數(shù)的語法比傳統(tǒng)的函數(shù)表達(dá)式更簡(jiǎn)潔,而且它們沒有自己的 thisargumentssupernew.target。它們非常適合用在需要匿名函數(shù)的地方,同時(shí)不能作為構(gòu)造函數(shù)使用。

          // 當(dāng)只有一個(gè)參數(shù)時(shí),圓括號(hào)不是必須的
          (singleParam) => { statements }
          singleParam => { statements }
          
          // 沒有參數(shù)的函數(shù)必須加圓括號(hào)
          () => { statements }
          

          箭頭函數(shù)有兩個(gè)主要優(yōu)點(diǎn):

          1?? 語法更簡(jiǎn)潔

          2?? 不會(huì)綁定 this

          切入正題【特點(diǎn)】

          沒有自己的 this

          箭頭函數(shù)不會(huì)創(chuàng)建自己的 this,它只會(huì)繼承外層作用域的 this

          function Person() {
           this.age = 0;
          
           setInterval(() => {
            // this 正確地指向 p 實(shí)例
            console.log(this === p); // true
            this.age++;
           }, 1000);
          }
          
          var p = new Person();
          

          與嚴(yán)格模式的關(guān)系

          由于 this 是詞法綁定的,嚴(yán)格模式中與 this 相關(guān)的規(guī)則將被忽略。

          var f = () => { 'use strict'; return this; };
          f() === window; // 或 global
          

          通過 call、apply 或 bind 調(diào)用

          因?yàn)榧^函數(shù)沒有自己的 this,使用這些方法調(diào)用時(shí)只能傳遞參數(shù),它們的第一個(gè)參數(shù) this 會(huì)被忽略。

          let adder = {
           base: 1,
           add: function (a) {
            console.log(this === adder); // true
            let f = (v) => v + this.base;
            return f(a);
           },
           addThruCall: function (a) {
            let f = (v) => {
             console.log(this === adder); // true
             console.log(`v 的值是 ${v},this.base 的值是 ${this.base}`); // 'v 的值是 1,this.base 的值是 1'
             return v + this.base;
            };
            let b = { base: 3 };
            // call() 方法不能綁定 this 為 b 對(duì)象,第一個(gè)參數(shù) b 被忽略了
            return f.call(b, a);
           }
          };
          
          console.log(adder.add(1)); // 輸出 2
          console.log(adder.addThruCall(1)); // 輸出 2
          

          使用箭頭函數(shù)作為方法

          箭頭函數(shù)沒有 this 綁定。

          "use strict";
          var obj = {
           i: 10,
           b: () => console.log(this.i, this), // undefined, Window{...}
           c: function () {
            console.log(this.i, this); // 10, Object {...}
           }
          };
          obj.b();
          obj.c();
          

          使用 new 操作符

          箭頭函數(shù)不能用作構(gòu)造函數(shù),用 new 調(diào)用會(huì)拋出錯(cuò)誤。

          var Foo = () => {};
          var foo = new Foo(); // TypeError: Foo is not a constructor
          

          作為匿名函數(shù)

          ES6 的箭頭函數(shù)表達(dá)式是匿名函數(shù)的一種簡(jiǎn)寫方式:

          // 匿名函數(shù)
          let show = function () {
              console.log("匿名函數(shù)")
          };
          show(); // "匿名函數(shù)"
          
          let show1 = () => console.log("匿名函數(shù)");
          show1(); // "匿名函數(shù)"
          

          不過,箭頭函數(shù)和傳統(tǒng)匿名函數(shù)在實(shí)際操作中還是有一些區(qū)別的。

          最后

          如果你有任何問題或建議,歡迎在評(píng)論區(qū)留言交流!祝你編程愉快!

          載說明:原創(chuàng)不易,未經(jīng)授權(quán),謝絕任何形式的轉(zhuǎn)載

          使用Tailwind CSS掌握動(dòng)畫技術(shù),為用戶帶來難忘的體驗(yàn)

          開篇

          動(dòng)畫已經(jīng)成為網(wǎng)頁設(shè)計(jì)的重要組成部分,使開發(fā)人員能夠創(chuàng)建引人入勝和互動(dòng)的用戶體驗(yàn)。

          Tailwind CSS,一款流行的實(shí)用型CSS框架,提供了一套強(qiáng)大的工具,可以輕松地創(chuàng)建令人驚艷的動(dòng)畫效果。

          在這篇博客文章中,我們將探索使用Tailwind CSS進(jìn)行高級(jí)動(dòng)畫的令人興奮的世界,并揭示一些令人驚嘆的技巧,將使您的網(wǎng)絡(luò)項(xiàng)目達(dá)到一個(gè)新的水平。

          Transition 與 Transform

          Tailwind CSS 提供了一系列利用 CSS 過渡和變換的實(shí)用類。這些屬性使您能夠輕松創(chuàng)建平滑的動(dòng)畫和令人驚嘆的變換效果,而無需花費(fèi)太多的精力。

          除了 transitionstransforms 之外,Tailwind CSS還支持關(guān)鍵幀動(dòng)畫。關(guān)鍵幀允許您通過在不同時(shí)間點(diǎn)指定一系列樣式變化來定義自定義動(dòng)畫。

          讓我們深入探討不同類型的動(dòng)畫。

          漸變動(dòng)態(tài)文字

          為了給漸變文字添加動(dòng)畫效果,我們將包含 animate-pulse 類。這個(gè)類會(huì)給元素應(yīng)用一個(gè)脈動(dòng)動(dòng)畫,給它一個(gè)微妙但引人注目的效果。

          <div class="ms-52 my-10 text-5xl font-extrabold">
            <span class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"> Tailwind CSS Animation </span>
          </div>

          在這個(gè)例子中,我們有一個(gè)包含文本“漸變文本”的 <span> 元素。為了創(chuàng)建漸變效果,我們使用 text-transparent 類使文本透明。最后,我們使用 bg-gradient-to-r 類來指定從紫色到藍(lán)色的水平漸變。

          用途:我們可以使用這個(gè)動(dòng)畫來突出或聚焦細(xì)節(jié)。

          骨架屏(占位區(qū)域)

          在這個(gè)例子中,我們將使用Tailwind CSS創(chuàng)建一個(gè)占位符內(nèi)容區(qū)域,用于在沒有網(wǎng)絡(luò)連接或正在加載數(shù)據(jù)時(shí)使用 :)

          <div class="mx-auto mt-10 w-full max-w-sm rounded-md border border-gray-300 p-4">
            <div class="animate-pulse space-x-4">
              <div class="grid">
                <div class="flex">
                  <div class="w-10 rounded-full bg-slate-200"></div>
                  <div class="ms-4 w-full space-y-6">
                    <div class="h-2 rounded bg-slate-200"></div>
                    <div class="space-y-3">
                      <div class="grid grid-cols-3 gap-4">
                        <div class="col-span-2 h-2 rounded bg-slate-200"></div>
                        <div class="col-span-1 h-2 rounded bg-slate-200"></div>
                      </div>
                      <div class="h-2 rounded bg-slate-200"></div>
                    </div>
                  </div>
                </div>
                <div class="mt-5 space-y-6 py-1">
                  <div class="h-2 rounded bg-slate-200"></div>
                  <div class="space-y-3">
                    <div class="grid grid-cols-3 gap-4">
                      <div class="col-span-2 h-2 rounded bg-slate-200"></div>
                      <div class="col-span-1 h-2 rounded bg-slate-200"></div>
                    </div>
                    <div class="h-2 rounded bg-slate-200"></div>
                  </div>
                  <div class="h-2 rounded bg-slate-200"></div>
                </div>
              </div>
            </div>
          </div>

          在這個(gè)例子中,我們使用嵌套的 <div>flex 類來使加載文本在水平和垂直方向上居中。 justify-centeritems-center 類確保內(nèi)容在父容器中居中顯示。

          通過應(yīng)用 animate-pulse 類,整個(gè)占位區(qū)域?qū)⒄故疽粋€(gè)脈動(dòng)動(dòng)畫,給用戶一種活動(dòng)的錯(cuò)覺,并提示內(nèi)容正在加載。

          用途:我們可以使用這個(gè)動(dòng)畫來展示請(qǐng)求的數(shù)據(jù)正在加載。

          3. 無限旋轉(zhuǎn)的球

          這段動(dòng)畫代碼創(chuàng)建了一個(gè)帶有邊框和旋轉(zhuǎn)效果的圓形元素。在圓形元素內(nèi)部,有一個(gè)較小的圓形元素位于右上角。

          <div class="my-40 flex">
            <div class="relative mx-auto h-28 w-28 animate-spin rounded-full border-2 p-4">
              <span class="absolute right-5 top-2 flex h-3 w-3">
                <span class="bg-white-500 relative inline-flex h-3 w-3 rounded-full bg-gray-500"> </span>
              </span>
            </div>
          </div>

          上面的代碼片段中有一個(gè)帶有類 my-40flexdiv 元素。在這個(gè) div 內(nèi)部,我們可以使用 animate-spin 類創(chuàng)建一個(gè)具有無限旋轉(zhuǎn)動(dòng)畫效果的圓形元素。我們可以用它來顯示數(shù)據(jù)加載的處理過程或圖像或文件的上傳過程。

          用途:使用此動(dòng)畫,我們可以展示數(shù)據(jù)加載、圖像加載或文件上傳的處理過程。

          4、雙重彈力圓形

          這段動(dòng)畫代碼創(chuàng)建了一個(gè)包含兩個(gè)圓的動(dòng)畫。其中一個(gè)是較大的圓形,會(huì)反彈,另一個(gè)是較小的圓形,在其下方旋轉(zhuǎn)。動(dòng)畫效果營(yíng)造出加載或活動(dòng)的錯(cuò)覺。

          <div class="my-40 flex">
            <div class="relative mx-auto h-10 w-10 animate-bounce">
              <div class="mx-auto h-16 w-16 animate-pulse rounded-full bg-gray-400"></div>
              <span class="absolute flex h-5 w-5 animate-spin">
                <span class="h-4 w-4 rounded-full bg-gray-400"> </span>
              </span>
            </div>
          </div>

          在這個(gè)動(dòng)畫中,我們有一個(gè)具有相對(duì)定位、居中、大小調(diào)整和彈跳動(dòng)畫效果的 div 類。在第二個(gè) div 內(nèi),有另一個(gè)具有居中、大小調(diào)整、脈沖動(dòng)畫效果和灰色背景顏色的 div 元素。

          我們?cè)诟冈?div 上應(yīng)用了 animate-bounce 類,因此所有內(nèi)部元素都具有默認(rèn)的彈性效果。我們還在一個(gè)更大的圓圈上應(yīng)用了 animat-pulse 效果,以實(shí)現(xiàn)脈沖效果。

          用途:我們可以使用這個(gè)動(dòng)畫來展示用戶的活動(dòng)或數(shù)據(jù)加載效果。

          5、旋轉(zhuǎn)的點(diǎn)狀正方形

          這個(gè)動(dòng)畫代碼由一個(gè)旋轉(zhuǎn)的圓角矩形形狀組成,表示某種活動(dòng)或加載。該矩形框具有虛線的灰色輪廓,以增加視覺效果。

          <div class="my-40 flex">
            <div class="mx-auto h-20 w-20 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-gray-500"></div>
          </div>

          上面的代碼片段有一個(gè)應(yīng)用旋轉(zhuǎn)動(dòng)畫效果到內(nèi)部 animate-spin 的類。 rounded-3xl 類將內(nèi)部 div 的角落變圓,創(chuàng)造出更圓潤(rùn)的形狀。 outline-dottedoutline-2outline-gray-500 類將內(nèi)部 div 應(yīng)用了一個(gè)寬度為2個(gè)單位的虛線灰色輪廓。

          用途:我們可以在多個(gè)地方使用這個(gè)動(dòng)畫,比如突出顯示幀、加載數(shù)據(jù)、文件或圖像處理等。

          6. 彈力圓圈

          這段動(dòng)畫代碼將創(chuàng)建一個(gè)帶有兩個(gè)彈跳元素的加載動(dòng)畫效果。最外層的元素將彈跳,而在其中,將有一個(gè)嵌套的元素也會(huì)彈跳。

          此外,還有一個(gè)小點(diǎn)狀元素會(huì)隨著其他元素一起移動(dòng)和彈跳。

          <div class="my-40 flex">
            <div class="relative mx-auto h-10 w-10">
              <div class="relative mx-auto ms-5 h-24 w-24 animate-bounce rounded-full border-2">
                <div class="absolute bottom-0 right-10">
                  <div class="relative h-40 animate-bounce">
                    <div class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-black"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          最外層的 div 具有類 animate-bounce 將創(chuàng)建一個(gè)彈跳動(dòng)畫效果。

          在那個(gè) div 里面,有一個(gè)嵌套的 div ,它的類是 animate-bounce ,也會(huì)產(chǎn)生一個(gè)彈跳效果。在第二個(gè)嵌套的 div 里面,有一個(gè)黑色的背景顏色( bg-black )和一個(gè)小尺寸的 h-2w-2 。這樣就創(chuàng)建了一個(gè)小的黑點(diǎn)或指示器,它也會(huì)參與彈跳動(dòng)畫。

          用途:我們可以使用這個(gè)動(dòng)畫來展示文件或圖像的處理和加載。

          7. 移動(dòng)的箭頭

          這段動(dòng)畫代碼將在SVG元素上創(chuàng)建一個(gè)移動(dòng)動(dòng)畫效果。SVG代表一個(gè)綠色箭頭,動(dòng)畫將通過改變箭頭的X位置來使其水平來回移動(dòng)。

          <div class="my-40 flex">
            <div class="relative mx-auto mt-5 animate-[propel_5s_infinite]">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" class="h-16 w-16">
                <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
              </svg>
            </div>
          </div>

          現(xiàn)在,在你的tailwind.config.js文件中添加關(guān)鍵幀以實(shí)現(xiàn)對(duì)象的動(dòng)畫效果。根據(jù)你的需求進(jìn)行修改。

          module.exports = {
            content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
            theme: {
              extend: {
                keyframes: {
                   propel: {
                    '0%': { transform: 'translateX(0)' },
                    '20%': { transform: 'translateX(25%)' },
                    '40%': { transform: 'translateX(-25%)' },
                    '60%': { transform: 'translateX(25%)' },
                    '100%': { transform: 'translateX(-25%)' },
                  },
                },
              },
            },
            plugins: [],
          }

          最外層的 div 具有 my-40flex 類,提供垂直間距并啟用彈性盒布局。在第二個(gè) div 內(nèi),有一個(gè)帶有XML命名空間、視口框和類屬性的 svg 元素。 h-16w-16 類設(shè)置SVG的高度和寬度, fill="green" 屬性將SVG的填充顏色設(shè)置為綠色。

          用途:我們可以使用這個(gè)動(dòng)畫來引導(dǎo)、聚焦和突出顯示區(qū)域。

          8. 旋轉(zhuǎn)的方塊

          這段動(dòng)畫代碼將創(chuàng)建一個(gè)容器,并對(duì)其應(yīng)用旋轉(zhuǎn)動(dòng)畫效果,使其不斷地來回位移或旋轉(zhuǎn)。

          容器內(nèi)部有一個(gè)較小的元素,它也應(yīng)用了翻轉(zhuǎn)動(dòng)畫效果,使其垂直來回連續(xù)旋轉(zhuǎn)。

          <div class="my-40 flex">
            <div class="relative mx-auto h-28 w-28 animate-[displace_5s_infinite] border border-red-200">
              <div class="h-14 animate-[flip_5s_infinite] bg-red-100"></div>
            </div>
          </div>

          現(xiàn)在,在你的tailwind.config.js文件中添加關(guān)鍵幀以動(dòng)畫化對(duì)象。

          module.exports = {
            content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
            theme: {
              extend: {
                keyframes: {
                  displace: {
                    '0%': { transform: 'rotate(0deg)' },
                    '20%': { transform: 'rotate(-90deg)' },
                    '40%': { transform: 'rotate(0deg)' },
                    '60%': { transform: 'rotate(0deg)' },
                    '80%': { transform: 'rotate(90deg)' },
                    '100%': { transform: 'rotate(0deg)' },
                  },
                },
              },
            },
            plugins: [],
          }
          

          animate-[displace_5s_infinite] 類將“displace”動(dòng)畫效果應(yīng)用于該元素,使其不斷來回旋轉(zhuǎn)。

          在內(nèi)部的 div 中, h-14animate-[flip_5s_infinite]bg-red-100 類代表容器內(nèi)的內(nèi)容具有14個(gè)單位的高度,紅色背景色,并應(yīng)用了“翻轉(zhuǎn)”動(dòng)畫效果,使其垂直來回連續(xù)旋轉(zhuǎn)。

          用途:我們可以將此動(dòng)畫用于加載數(shù)據(jù)、文件或圖像處理或上傳。

          將動(dòng)畫與其他 Tailwind 功能(暗模式)結(jié)合使用

          Tailwind CSS的動(dòng)畫功能可以與框架提供的其他功能無縫集成。例如,您可以將動(dòng)畫與響應(yīng)式設(shè)計(jì)類結(jié)合使用,以在各種設(shè)備上創(chuàng)建適應(yīng)性和引人入勝的用戶體驗(yàn)。

          您還可以利用Tailwind CSS的暗模式功能,根據(jù)用戶的首選顏色方案應(yīng)用不同的動(dòng)畫效果。通過使用動(dòng)態(tài)類和實(shí)用程序變體,您可以創(chuàng)建復(fù)雜而交互式的動(dòng)畫,以增強(qiáng)您的網(wǎng)頁設(shè)計(jì)。

          結(jié)束

          上述設(shè)計(jì)的動(dòng)畫展示了使用CSS和Tailwind CSS框架可以實(shí)現(xiàn)的多樣性和創(chuàng)造力。這些示例展示了各種動(dòng)畫效果,如旋轉(zhuǎn)、彈跳、脈動(dòng)、翻轉(zhuǎn)和擺動(dòng)。

          通過利用CSS關(guān)鍵幀和Tailwind CSS實(shí)用類的力量,這些動(dòng)畫為博客或網(wǎng)站帶來了動(dòng)態(tài)和引人入勝的元素。無論是旋轉(zhuǎn)圖標(biāo)、彈跳形狀還是擺動(dòng)文本,這些動(dòng)畫都可以吸引用戶的注意力,增強(qiáng)視覺體驗(yàn)。

          此外,Tailwind CSS 配置文件中的自定義和定義關(guān)鍵幀的能力使得動(dòng)畫能力得以精細(xì)調(diào)整和擴(kuò)展。這種靈活性賦予開發(fā)者創(chuàng)造獨(dú)特且引人注目的效果,以滿足其特定設(shè)計(jì)需求的能力。

          總的來說,將動(dòng)畫效果融入博客中可以幫助創(chuàng)造令人難忘和愉悅的用戶體驗(yàn),給訪問者留下深刻的印象。然而,重要的是要謹(jǐn)慎使用動(dòng)畫效果,并考慮它們對(duì)性能和可訪問性的影響,以確保所有用戶都能享受無縫和包容的瀏覽體驗(yàn)。

          由于文章內(nèi)容篇幅有限,今天的內(nèi)容就分享到這里,文章結(jié)尾,我想提醒您,文章的創(chuàng)作不易,如果您喜歡我的分享,請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā),讓更多有需要的人看到。同時(shí),如果您想獲取更多前端技術(shù)的知識(shí),歡迎關(guān)注我,您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容,敬請(qǐng)期待。

          心箭頭

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>實(shí)心箭頭</title>
          <style>
          .con{
              width: 300px;
              height: 300px;
              border: 1px solid #ccc;
              margin: 50px auto;
              background-color:#ccc;
          }
          .arrow-top{
              border-bottom: 10px solid #fff;
              border-right: 10px solid #fff;
              border-left: 10px solid #fff;
              border-top: 10px solid #ccc;
              width: 0px;
              height: 0px;
              position: relative;
              top:-40px;
              left:100px;
          }
          
          .arrow-bottom{
              border-bottom: 10px solid #fff;
              border-right: 10px solid #fff;
              border-left: 10px solid #fff;
              border-top: 10px solid #ccc;
              width: 0px;
              height: 0px;
              position: relative;
              top:-40px;
              left:100px;
          }
          </style>
          </head>
          <body>
          <div class="con">
          <div class="arrow-top"> </div>
          </div>
          </body>
          </html>



          非實(shí)心箭頭


          主站蜘蛛池模板: 鲁丝丝国产一区二区| 中文字幕一区二区三区视频在线| 国产成人一区二区三区精品久久 | 国产亚洲综合精品一区二区三区 | 久久国产一区二区三区| 国产人妖视频一区在线观看| 亚洲AV无码一区二区三区牛牛| 激情内射日本一区二区三区| 精品视频在线观看一区二区三区| 一区二区亚洲精品精华液| 一区二区在线视频| 亚欧色一区W666天堂| 国产伦精品一区二区三区| 中文字幕一区日韩在线视频 | 亚洲午夜福利AV一区二区无码| 在线观看国产一区亚洲bd| 精品无码国产一区二区三区51安| 夜色福利一区二区三区| 亚洲av无码不卡一区二区三区| 国产一区二区三区在线看| 亲子乱AV视频一区二区| 久久se精品一区二区影院| 中文字幕日韩一区二区三区不| 国产一区二区三区无码免费| 99国产精品欧美一区二区三区| 毛片无码一区二区三区a片视频| 国产福利一区二区三区在线观看| 色噜噜狠狠一区二区三区果冻| 久久久久人妻精品一区二区三区 | 久久精品一区二区三区资源网| 精品视频一区二区三区免费| 无码视频一区二区三区在线观看 | 91精品一区二区综合在线| 大香伊人久久精品一区二区| 亚洲熟女综合一区二区三区| 性色av无码免费一区二区三区 | 日本视频一区二区三区| 综合久久一区二区三区| 亚洲国产精品一区二区久久| 精品亚洲AV无码一区二区三区| 亚洲av无码一区二区三区在线播放|