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 功能的编写,在熟悉基 ...
随机推荐
- js 获取数组最后一个元素
当然有很多中做法 我这边就随便写几个最常用 最简单的方法把 # shift 删除数组第一个元素,并返回该元素,跟pop差不多 var a = ["aa","bb" ...
- App测试基本流程详解（汇总整理）
前言 看过许多大神对APP测试的理解,博主总结了一下我们平时测试APP应该注意的一些测试点并结合大神的理解,总结出这篇文章. 一.测试周期 测试周期一般为两周,根据项目情况以及版本质量可适当缩短或延长 ...
- python的6种基本数据类型--集合
特征 1.确定性(元素必须可hash) 2.互异性(去重) 3.无序性(集合中的元素没有顺序,先后之分) >>> s = {1,1,1,2,2,3,4,5,6,7} # 创建 > ...
- IE 8 浏览器 F12 调试功能无法使用
“按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全 ...
- 信息安全技术PGP实验 20155205 20155218
信息安全技术PGP实验 一.实验过程 PGP的安装与设置(Mac版) 访问GPGTools网站,下载GPG Suite for OS X,下载完毕,双击dmg文件,运行安装操作. 创建PGP密钥(一定 ...
- 未找到导入的项目“C:\Program Files\MSBuild\Microsoft\Silverlight\v5.0\Microsoft.Silverlight.CSharp.targets”。
问题描述: 原先创建的Silverlight程序,后来系统重装了,再打开Silverlight程序时提示:C:\Users\yzg\Desktop\ocr\TJSilverlight\TJSilver ...
- 公司内部Samba 服务器架设
1.需求 在公司内部打造一个文件管理系统,其作用域仅仅在公司内部,支持在线对文件的修改和保存操作等,同时也要注意权限问题. 2.策划 目前设立四个群组:运维.开发 .测试和普通,当然所对应的对文件的访 ...
- spoj high
matrixtree定理裸体,学了行列式的n^3解法,(应该是能应用于所有行列式): 代码是参考某篇题解的... #include<iostream> #include<cstrin ...
- （动规 或 最短路）Help Jimmy（poj 1661）
http://poj.org/problem?id=1661 Description "Help Jimmy" 是在下图所示的场景上完成的游戏. 场景中包括多个长度和高度各不相同的 ...
- eclipse选中某个字段没法高亮其他相同字段
eclipse选中某个字段无法高亮其他相同字段解决办法: window >> preference >> java >> Editor >> Mark ...