vuebase-5.过渡和动画
动画的方案:
1.在 CSS 过渡和动画中自动应用 class
2.可以配合使用第三方 CSS 动画库,如 Animate.css
3.在过渡钩子函数中使用 JavaScript 直接操作 DOM
4.可以配合使用第三方 JavaScript 动画库,如 Velocity.js
-----------
实现动画的元素必须脱离文档流
过渡的类名:
在进入/离开的过渡中,会有 6 个 class 切换。
-
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 -
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 -
v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。 -
v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 -
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。 -
v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<Parent />
<!-- <Music/> -->
<slotDemo>
<!-- <div>hello插槽</div>
<template slot="v1">
<div class="v1">{{slotParentmsg}}</div>
</template>
<template slot="v2">
<div class="v1">v2内容</div>
</template> -->
<div slot-scope="slotparents"><h2>{{slotparents.msgs}}</h2></div>
</slotDemo>
<animtes></animtes>
</div>
</template>
<script>
/* import HelloWorld from './components/HelloWorld' */
import Parent from './components/parent'
import Music from './components/music'
import slotDemo from './components/slotDemo'
import animtes from './components/animtes'
export default {
name: 'App',
components: {
Parent,
Music,
slotDemo,
animtes
},
data(){
return{
slotParentmsg:"插槽的动态内容"
}
},
methods:{
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
animtes.vue-----------------------------------------------------------------------------------------------------------
<template>
<div class="animtes">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
<button v-on:click="flag = !flag" style="display:block;width:200px;margin:0 auto;">
NewToggle按钮
</button>
<transition name="ve">
<p v-if="flag">hello NewToggle</p>
</transition>
<button v-on:click="flag1 = !flag1" style="display:block;width:200px;margin:0 auto;">
NewTogglecss按钮
</button>
<transition name="custom-classes-transition"
enter-active-class="animated rollIn"
leave-active-class="animated zoomInUp">
<p class="ves" v-if="flag1">ves NewToggle 11111</p>
</transition>
<p></p>
<button v-on:click="flag2 = !flag2" style="display:block;width:200px;margin:0 auto;">
NewTogglecss按钮flag2
</button>
<transition name="vesf">
<p class="ves" v-if="flag2">ves NewToggleflag2 11111</p>
</transition>
</div>
</template>
<script>
export default {
name: "animtes",
data() {
return {
show: true,
flag:true,
flag1:true,
flag2:true
}
},
methods: {
}
}
</script>
<style lang="css" scoped>
/* .fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
{
opacity: 0;
} */
/* .fade-leave-active below version 2.1.8 */
/* 0的状态*/
.ve-enter,
.ve-leave-to{
opacity: 0;
}
/* 1的状态*/
.ve-enter-to,
.ve-leave{
opacity: 1;
}
/* 过渡*/
.ve-enter-active,
.ve-leave-active{
transition:opacity 0.5s;
}
.ves{
width:200px;
height:200px;
background-color:red;
text-align:center;
font-size:20px;
}
/* 0的状态*/
.ves-enter,
.ves-leave-to{
opacity: 0;
width:0;
height:0;
}
/* 1的状态*/
.ves-enter-to,
.ves-leave{
opacity: 1;
height:200px;
width:200px;
}
/* 过渡*/
.ves-enter-active,
.ves-leave-active{
transition:all 1s;
}
/* ***********************************vesf********************************/
/* 0的状态*/
.vesf-enter,
.vesf-leave-to{
}
/* 1的状态*/
.vesf-enter-to,
.vesf-leave{
}
/* 过渡*/
.vesf-enter-active{
animation:bounce-in 0.5s;
}
.vesf-leave-active{
animation:bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
</style>
原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11331248.html
- springmvc下载文件
- PHP获取URL地址的一些坑
- 使用ResourceBundle读取配置文件
- 关于exp statistics的问题和简单测试(82天)
- laravel访问路由在nginx服务器上无法处理
- How Tomcat Works, A Guide to Developing Your Own Java Servlet Container
- 【开发指南】如何为nexus 5编译固件
- 支持向量机(SVM)入门详解(续)与python实现
- 数据库
- 关于Bom头的一些坑
- 使用shell脚本查看数据库负载情况(81天)
- 无法连接远程mysql数据库解决方案
- 归档问题导致的数据库无法启动 (80天)
- ubuntu上安装php7.0+nginx+mysql
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一文详解 Ansible 自动化运维!
- 手把手教你搭建织女星开发板RISC-V开发环境
- R语言多臂试验 - 我们应该考虑多重性吗?
- Stata估算观测数据的风险比
- R语言利用基线协变量提高随机对照试验的效率
- R语言使用倾向评分提高RCT(随机对照试验)的效率
- R语言调整随机对照试验中的基线协变量
- R语言用多重插补法估算相对风险
- R语言分析协变量之间的非线性关系
- stata如何处理结构方程模型(SEM)中具有缺失值的协变量
- stata对包含协变量的模型进行缺失值多重插补分析
- 互联网直播点播平台go语言搭建重定向和反向代理的区别及使用
- UNIX时间戳和北京时间的相互转换
- R语言对苏格兰独立民意调查的Meta分析
- 案例:归档自动清理脚本失效及连带影响