Vue2.5開發去哪兒網App 第五章筆記上

時間 2020-05-12

標籤 vue2.5 vue 開發哪兒 app 第五筆記简体版

原文原文鏈接

1.css動畫原理css

 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; }

.fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 2s; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中css動畫原理</title>
    <script src="../../vue.js"></script>
    <style> .fade-enter{ opacity: 0;
        } .fade-enter-active{ transition: opacity 2s;
        } .fade-leave-to{ opacity: 0;
        } .fade-leave-active{ transition: opacity 2s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var vm = new Vue({ el:"#app", data:{ show:true, }, methods:{ handleCLick:function () { this.show = !this.show } } }) </script>
</body>
</html>

View Code

2.使用animate.css庫html

animate.css 提供了大量的動畫效果，官網：https://daneden.github.io/animate.css/?vue

使用animate.css 須要在transition 標籤中自定義屬性名字，例如：git

enter-active-class="animated hinge"
leave-active-class="animated jello"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用animate-css庫</title>
    <script src="../../vue.js"></script>
    <link rel="stylesheet" href="../../animate.css">
</head>
<body>
<div id="app">
    <!--使用animate-css 自定義名字 animated開頭-->
    <transition enter-active-class="animated hinge" leave-active-class="animated jello">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var vm = new Vue({ el:"#app", data:{ show:true, }, methods:{ handleCLick:function () { this.show = !this.show } } }) </script>
</body>
</html>

View Code

在第一次進入頁面時，附帶效果github

在transition 中添加屬性：app

appear appear-active-class="animated hinge"

3. 同時使用過渡和動畫ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同時使用過渡和動畫</title>
    <script src="../../vue.js"></script>
    <link rel="stylesheet" href="../../animate.css">
    <style> .fade-enter,.fade-leave-to{ opacity: 0;
        } .fade-leave-active, .fade-enter-active{ transition: opacity 3s;
        }

    </style>
</head>
<body>
<div id="app">
    <!--:duration 自定義時長,-->
    <!--例如：設置出場入場動畫時間-->
    <!--:duration=「{enter:5000,leave:10000}」-->

    <!--appear appear-active-class:初次動畫-->

    <!--type 肯定哪一種爲時長爲準-->

    <transition enter-active-class="animated hinge fade-enter-active" leave-active-class="animated jello fade-leave-active" appear name="fade" type="transition" appear-active-class="animated hinge">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var vm = new Vue({ el:"#app", data:{ show:true, }, methods:{ handleCLick:function () { this.show = !this.show } } }) </script>
</body>
</html>

View Code

4.js動畫與Velocity-js結合函數

<!--動畫鉤子-->
<!--顯示：-->
<!--before-enter(el)-->
<!--enter(el,done) done爲回調函數-->
<!--after-enter-->

<!--隱藏：-->
<!--before-leave-->
<!--after-leave-->
<!--leave-->

綁定事件：動畫

<transition name="fade" @before-enter="handleBeforEnter" @enter="handleEnter" @after-enter="handleafterEnter" @leave="handleLeave"
    >
        <div v-show="show">hello world</div>
    </transition>

處理事件：this

 handleCLick:function () { this.show = !this.show }, handleBeforEnter:function (el) { el.style.color = 'red' }, handleEnter:function (el,done) { setTimeout(()=>{ // 執行結束後，執行done el.style.color = 'yellow' },2000) setTimeout(()=>{ done() },4000) }, handleafterEnter:function (el) { el.style.color = 'black' }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js動畫與Velocity-js結合</title>
    <script src="../../vue.js"></script>
    <script src="../../velocity.js"></script>
</head>
<body>
<!--動畫鉤子-->
<!--顯示：-->
<!--before-enter(el)-->
<!--enter(el,done) done爲回調函數-->
<!--after-enter-->

<!--隱藏：-->
<!--before-leave-->
<!--after-leave-->
<!--leave-->

<div id="app">
    <transition name="fade" @before-enter="handleBeforEnter" @enter="handleEnter" @after-enter="handleafterEnter" @leave="handleLeave"
    >
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var vm = new Vue({ el:"#app", data:{ show:true, }, methods:{ handleCLick:function () { this.show = !this.show }, handleBeforEnter:function (el) { el.style.color = 'red' }, handleEnter:function (el,done) { setTimeout(()=>{ // 執行結束後，執行done
 el.style.color = 'yellow' },2000) setTimeout(()=>{ done() },4000) }, handleafterEnter:function (el) { el.style.color = 'black' } } }) </script>
</body>
</html>

View Code

使用 Velocity.js

官網：http://velocityjs.org/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js動畫與Velocity-js結合</title>
    <script src="../../vue.js"></script>
    <script src="../../velocity.js"></script>
</head>
<body>
<!--動畫鉤子-->
<!--顯示：-->
<!--before-enter(el)-->
<!--enter(el,done) done爲回調函數-->
<!--after-enter-->

<!--隱藏：-->
<!--before-leave-->
<!--after-leave-->
<!--leave-->

<div id="app">
    <transition name="fade" @before-enter="handleBeforEnter" @enter="handleEnter" @after-enter="handleafterEnter"
    >
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var vm = new Vue({ el:"#app", data:{ show:true, }, methods:{ handleCLick:function () { this.show = !this.show }, handleBeforEnter:function (el) { el.style.opacity = 0; }, handleEnter:function (el,done) { Velocity(el, {opacity:1}, { duration:1000, complete:done }) }, handleafterEnter:function (el) { console.log('動畫結束') } } }) </script>
</body>
</html>