vue中封裝動畫元件(漸隱漸現效果)

阿新 • • 發佈：2019-01-28

<body>
    <div id="root"> 
          <comp :dis="show">
             <div>hello</div> 
          </comp>
          <comp :dis="show">
             <h1>hello</h1> 
          </comp>
          <button @click="btnclick">toggle</button>
    </div>
    <script> 
       let comp = {//封裝的元件 

           props:["dis"],
           template:`
            <transition 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"

                @before-leave="handleBeforeLeave"
                @leave="handleLeave"
                @after-leave="handleAfterLeave" 

            >
               <slot v-if="dis"></slot>
            </transition>
           `,
           methods:{
            handleBeforeEnter:function(el){
               el.style.opacity = 0;
            },
            handleEnter:function(el,done){
                Velocity(el,{opacity:1 
},{duration:1000,
                    complate:done 
                })
            },
            handleAfterEnter:function(el){},
            handleBeforeLeave:function(el){},
            handleLeave:function(el,done){
                Velocity(el,{opacity:0},{
                    duration:1000,
                    complate:done //done是必須的,觸發之後,才會走下一階段handleAfterLeave，可以檢視http://velocityjs.org/#beginAndComplete
                })
            },
            handleAfterLeave:function(el){
                el.style.opacity = 0;
            }
           }
       }
       var vm = new Vue({
          el:'#root',
          data:{
             show:true
          },
          methods:{
            btnclick:function(){
                this.show = !this.show;
            } 
          },
          components:{
            comp 
          }
      })
    </script>
</body>

vue中封裝動畫元件(漸隱漸現效果)

<body> <div id="root"> <comp :dis="show"> <div>hello</div>

Vue 動畫過度效果（漸隱漸現）

首先一個toggle 效果： <div id="root"> <div v-if="show">hello world</div> <button @click="handleClick">切換</button> </

在vue中封裝可複用的元件

本次封裝的元件以toast元件為例以前使用移動端ui外掛時，通過一句程式碼比如 $.toast( ‘ 需要顯示的內容 ’ )，從而在頁面上展示這段文字，並在一定時間後消失。現在我們也嘗試自己封裝toast元件。準備工作：vue-cli腳手架工程先看一下涉及到的檔案目錄截圖：

在vue中封裝echarts折線圖元件

先來張圖要實現在父元件引用子元件圖表，父元件需要傳遞給圖表元件幾個資料， id: 圖表例項化需要一個唯一的id； time： x軸的顯示資料，引數名可以自己定義； opData：用來配置series的系列列表，引數可以自己定義； unit： y軸單

在Vue中封裝一個上傳檔案元件

封裝一個上傳檔案的元件，如下：使用<input type='file'> 來實現檔案上傳，具體操作參照以往JS版的實現這裡主要說作為一個元件，選中檔案之後，在輸入框中顯示檔名稱，點選Submit將將檔案傳給父元件，再由父元件提價到後臺

開啟動畫效果——漸隱漸現效果

啟動某項程式時我們往往都能看到不同的“開機動畫”，千變萬化的動畫也只不過是四種基本動畫衍變美化而成的。四種android動畫效果：alpha　　漸變透明度動畫效果　 scale　　漸變尺寸伸縮動畫效果　　

iPhone開發--漸隱漸顯動畫效果

1、最簡單，最實用，最常用的［移動動畫］ //移動一個view ---------------------------------------------------------------------------------------------------------

vue中封裝元件

一、分析該元件在什麼時候會被呼叫，例如我之前抽出的彈窗元件其中紅色框部分是動態顯示，那麼首先拆分時，要知道哪部分應該是由父元件傳入的資料，傳入的資料有哪些，分別是什麼型別，元件間通訊的方式要用哪種，因為這個是子元件中進行顯示的，因此我在拆分時候用的是prop進行傳

android圖片漸隱漸現動畫效果

最近專案中需要用到一個過渡動畫，就是一個圖片漸隱漸現，然後重複五次後過渡動畫消失，首先說下我的思路，一個timer，重複執行，然後執行的時候肯定要不斷呼叫顯示、隱藏動畫。其中定時器每次重複的時間是動畫顯示（或隱藏）的時間 public class Mai

前端模擬手機屏幕圖片漸隱漸現效果實現

pad style int 循環 sel 慢慢 inter 定時器 height 　　在網站上，我們經常會看到這樣的效果，有一個IphoneX的手機屏幕，然後屏幕上會像真的一樣，會出現各種動畫效果，譬如圖片的漸隱漸現。今天我們就嘗試做一個這樣的效果。　　HTML頁面結構

vue中css動畫原理

methods cli css樣式第一個內部 -c 顯示 opacity enter 顯示原理： <transition name=‘fade‘> 　　<div v-if=‘show‘>hello world</div>

Vue 中的動態元件與 v-once 指令

toggle 兩個元件的功能，程式碼如下。 <div id="root"> <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child

Vue 中自定義元件（包含例項）

Vue 支援自定義元件，方便我們在開發過程中根據自己的專案自定義元件。定義主要是通過 Vue.component( ) 來完成。新建一個 alert.js 檔案： // 自定義一個 alert 元件 Vue.component('alert', { template: '&

vue中使用element元件的Layout佈局和Button按鈕實現分頁

1.安裝elementUI：npm i element-ui -S 2.引入elementUI元件（main.js檔案中） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

vue中使用elementUI元件的Upload 上傳圖片

1.安裝elementUI：npm i element-ui -S 2.引入elementUI元件（main.js檔案） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

vue中css動畫transition

動畫第一幀：v-enter v-leave 動畫最後一幀： v-enter-to v-leave-to 動畫屬性時間等過程：v-enter-active v-leave-active 如果沒有寫第一幀或最後一幀，那麼預設是動畫開始前的

05.vue中js動畫與Velocity.js的結合

vue中js動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js動畫</title> &l

vue中動態新增元件

效果: 程式碼: <template> <div> <div v-for="(item,index) in lst">

Vue中的動畫特效

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。包括以下工具：在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫，如 Animate.css 在過渡鉤子函式中使用 JavaScript 直接操作 DOM 可以

Vue中的父子元件通訊以及使用sync同步父子元件資料

目錄正文前言：之前寫過一篇文章《在不同場景下Vue元件間的資料交流》，但現在來看，其中關於“父子元件通訊”的介紹仍有諸多缺漏或者不當之處，正好這幾天學習了關於用sync修飾符做父子元件資料雙向繫結的的用法，於是決定寫一篇文章，再次總結下“Vue中的父

vue中封裝動畫元件(漸隱漸現效果)

相關推薦