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>

View Code

原文出处：https://www.cnblogs.com/donghaoblogs/p/10426563.html

Vue2.5开发去哪儿网App 第五章笔记 上

Vue2.5开发去哪儿网App 第五章笔记上