直播平臺開發,進入可視區域執行動畫、動效、新增樣式類名
直播平臺開發,進入可視區域執行動畫、動效、新增樣式類名
新增一個全域性自定義指令
import Vue from 'vue' //註冊'v-animate' 當元素出現在可視範圍時新增類名觸發動效樣式 Vue.directive('animate', { inserted: function (el, binding) { // 聚焦元素 binding.addClass = () => { const { top } = el.getBoundingClientRect() const h = document.documentElement.clientHeight || document.body.clientHeight if (top < h) { if(el.className.indexOf(binding.value) == -1 ){ // 初次還未繫結過,則新增類名(注意:下面單引號中間是一個空格!!!) el.className = binding.value+' '+el.className } if (binding.addClass) { window.removeEventListener('scroll', binding.addClass) } } } window.addEventListener('scroll', binding.addClass,true) binding.addClass() }, unbind: function (el, binding) { if (binding.addClass) { window.removeEventListener('scroll', binding.addClass) } } })
回到html中給需要新增動效的地方新增上 類名
<p class="title" v-animate="'queue-bottom'">我是需要動效的標題</p>
動畫效果:
@keyframes bottomMoveTop{ 0%{ opacity: 0; transform: translate3d(0, 50px, 0); } 100% { opacity: 1; transform: none; } } .queue-bottom { animation: bottomMoveTop .6s cubic-bezier(.5,1,.89,1); animation-fill-mode: forwards; }
以上就是直播平臺開發,進入可視區域執行動畫、動效、新增樣式類名, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2903339/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- API服務平臺,可進行分散式執行API分散式
- 直播平臺開發,滾動條樣式的修改和更換
- 500名主播發不出工資 直播平臺進入洗牌階段?
- 如何判斷元素是否進入可視區域viewport?View
- 直播平臺開發,css溢位之後捲軸樣式修改CSS
- 如何開發直播平臺,直播平臺開發需要CDN嗎
- 直播平臺開發,Clip-path實現按鈕流動邊框動畫動畫
- 短視訊平臺開發,在上傳圖片時,自動新增平臺的水印
- 直播平臺軟體開發,flutter Wrap 自動換行元件Flutter元件
- 直播平臺開發,載入網頁、html檔案顯示載入進度網頁HTML
- 直播平臺開發,直播各個分類單例設計展示單例
- 直播平臺軟體開發,卡片式輪播圖,可左右滑動
- 直播平臺軟體開發,Extjs Grid自動換行JS
- 直播電商平臺開發,環形進度條元件元件
- 直播電商平臺開發,Layui給標籤新增點選事件UI事件
- 直播電商平臺開發,輸入框的防抖
- 邁步進入跨平臺開發時代
- 線上教育直播系統開發_教育行業線上直播平臺搭建行業
- 直播平臺原始碼,CSS 修改捲軸樣式、信封邊框樣式原始碼CSS
- 直播平臺開發,電話號碼正規表示式
- input聚焦時,滾動至可視區域
- 直播軟體原始碼,實現頁面滾動到可視區顯示動畫效果原始碼動畫
- 直播平臺原始碼,可摺疊式選單欄原始碼
- 直播平臺開發,jsp登入註冊程式碼JS
- 短視訊平臺搭建,自定義滾動條的樣式
- 直播平臺原始碼,Uniapp text 樣式設定原始碼APP
- 短視訊平臺開發,自定義一個彈窗樣式和內容
- 短視訊平臺開發,自動按照使用者設定進行時間轉換
- 在 WSL Ubuntu 上使用 .NET 進行跨平臺開發新手入門Ubuntu
- 開發類似鬥魚虎牙的運營級直播平臺多少錢
- 直播平臺開發,動態文字輸出,文字自動輸出
- 淺談直播教育平臺開發成本
- 手機直播平臺開發的解析
- 直播平臺搭建,自定義View實現loading動畫載入View動畫
- 直播平臺開發,操作成功後自動返回首頁
- 各類體育賽事直播平臺開發全面的解決方案
- 區塊鏈支付平臺開發,跨境入金支付系統開發區塊鏈
- 移動開發的跨平臺技術演進移動開發