Vue2.5开发去哪儿网App 第五章笔记 上
1.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>
2.使用animate.css库
animate.css 提供了大量的动画效果，官网：https://daneden.github.io/animate.css/?
使用animate.css 需要在transition 标签中自定义 属性名字，例如：
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>
在第一次进入页面时，附带效果
在transition 中添加属性：
appear
appear-active-class="animated hinge"
3. 同时使用过渡和动画
<!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>
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>
处理事件：
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>
使用 Velocity.js
<!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>
Vue2.5开发去哪儿网App 第五章笔记 上的更多相关文章
- Vue2.5开发去哪儿网App 第五章笔记 下
1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
- Vue2.5开发去哪儿网App 第四章笔记 上
一 . 组件细节知识点 1. 解决组件在h5中编码规范 例如 : table , ul , ol 等等 <table> <tbody> <row></r ...
- Vue2.5开发去哪儿网App 第三章笔记 上
1. vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...
- Vue2.5开发去哪儿网App 第四章笔记 下
1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...
- Vue2.5开发去哪儿网App 第三章笔记 下
1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法 ...
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
随机推荐
- 2018.11.02 NOIP训练 停车场（线段树）
传送门 这是一道困饶了我一年的题. 其实就是去年去NOIP提高组试水的时候考的模拟题 但当时我水平不够,跟ykykyk一起杠了一个下午都没调出来. 今天终于AAA了. 其实就是一个维护最长连续0101 ...
- 2.7 Sobel导数
OpenCV函数 Sobel(src_gray,grad_x/grad_y,ddepth,x_order,y_order,scale,delta,BORDER_DEFAULT ) Scharr( ) ...
- 吓死baobao了
早上远程连接服务器连不上,后面重启服务器,显示进入紧急修复模式:welcome to emergency mode!after logging in ,type “journalctl -xb” to ...
- denyhost安装脚本
#!/bin/bashDENYHOSTS=DenyHosts-2.6.tar.gzDENYHOSTS_VERSION=DenyHosts-2.6DENYHOSTS_URL=http://192.168 ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记十二之铭文升级版
铭文一级: ======Pull方式整合 Flume Agent的编写: flume_pull_streaming.conf simple-agent.sources = netcat-sources ...
- 源项目 -> fork -> 本地 （如何把源项目的代码合并到本地然后推送给fork）
git remote -v git remote add 别名 地址 git fetch 别名 git merge 别名/分支 第一步:命令行进入到本地.git 所在的目录,查看remote 信息 ...
- C和C++中的volatile、内存屏障和CPU缓存一致性协议MESI
目录 1. 前言2 2. 结论2 3. volatile应用场景3 4. 内存屏障(Memory Barrier)4 5. setjmp和longjmp4 1) 结果1(非优化编译:g++ -g -o ...
- 大压力下Redis参数调整要点
调整以下参数,可以大幅度改善Redis集群的稳定性: 为何大压力下要这样调整? 最重要的原因之一Redis的主从复制,两者复制共享同一线程,虽然是异步复制的,但因为是单线程,所以也十分有限.如果主从间 ...
- 【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- kepware http接口 php
读取某变量的值(HttpRequest <?php $request = new HttpRequest(); $request->setUrl('http://127.0.0.1:393 ...