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 功能的编写,在熟悉基 ...
随机推荐
- react父转子
父组件使用子组件,子组件绑定父组件数据 ,子组件用props使用父组件数据 import React, { Component } from 'react'; import logo from './ ...
- Le Chapitre VIII
J'appris bien vite à mieux connaître cette fleur. Il y avait toujours eu, sur la planète du petit pr ...
- Educational Codeforces Round 61 D 二分 + 线段树
https://codeforces.com/contest/1132/problem/D 二分 + 线段树(弃用结构体型线段树) 题意 有n台电脑,只有一个充电器,每台电脑一开始有a[i]电量,每秒 ...
- matlab 向量场线积分
syms t x y z F x=cos(t); y=sin(t); z=*sin(t)^-; F=[x^*y , (/)*x^,x*y ] ; %场函数 V=[diff(x,t),diff(y,t) ...
- 注意JDBC驱动的版本和JDK的版本是否匹配 JDBC连接Mariadb
Java利用JDBC连接Mariadb的过程和MySQL基本一致. 但是需要注意JDBC驱动的版本和JDK的版本是否匹配: JDBC和JDK版本对应关系 JDBC版本 JDK版本 2.x 1.8 1. ...
- idea设置字体大小
第一次玩儿idea,也是个新手小白,甚是惭愧,也是一步步慢慢摸索,下面我们按照步骤一步步操作 就可以了. 1.首先,先设置代码的字体大小: 2.设置周围菜单栏的字体大小: 3.设置控制台的字体大小:
- (转)ASP.NET(C#)FileUpload实现上传限定类型和大小的文件到服务器
上传文件有两个主要的目的地,一个是服务器,另一个是数据库,ASP.NET内置了FileUpload这个上传控件,文本框显示用户选择的文件的全名. 其属性主要包括: ContenLength:上传文件大 ...
- 巧用NULL模式解耦依赖
1. 初始 应用A和应用B均用到了库libX.a中的类class A: 由于需求的变化,应用B需要库libM.a的能力,以便和服务M交互.为了复用和简化,通过类A间接提供,应用B不用修改代码,只需要重 ...
- AFNetworking网络请求数据
//创建AFNetworking的请求操作 AFHTTPRequestOperation *operation = [[AFHTTPRequestOperation alloc] initWit ...
- kepware http接口 swift
读取某变量的值 import Foundation let headers = [ "Connection": "keep-alive", "Cach ...