VUE：过渡&动画
VUE：过渡&动画
vue动画的理解
1）操作css的 trasition 或 animation
2）vue会给目标元素添加/移除特定的class
3）过渡的相关类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter/xxx-leave-to：指定隐藏时的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_过渡&动画</title>
<style>
/* 显示或隐藏的过滤效果 */
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/* 隐藏时的样式 */
.xxx-enter,.xxx-leave-to{
opacity: 0;
} /* 显示的过滤效果 */
.move-enter-active{
transition: all 1s;
}
/* 隐藏的过滤效果 */
.move-leave-active{
transition: all 3s;
}
/* 隐藏时的样式 */
.move-enter,.move-leave-to{
opacity: 0;
transform: translateX(20px);
}
</style>
</head>
<body>
<!--
1.vue动画的理解
操作css的trasition或animation
vueh会给目标元素添加/移除特定的class
2.基本过渡动画的编码
1）在目标元素外包裹<transition name="xxx"></transition>
2）定义class样式
1>.指定过渡样式:transition
2>.指定隐藏时的样式:opacity/其他
3）过渡的类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter：指定隐藏时的样式
-->
<div id="test1">
<button @click="isShow=!isShow">toggle</button>
<transition name='xxx'>
<p v-show="isShow">hello</p>
</transition>
</div> <div id="test2">
<button @click="isShow=!isShow">toggle</button>
<transition name='move'>
<p v-show="isShow">hello</p>
</transition>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:'#test1',
data(){
return {
isShow:true
}
}
}) new Vue({
el:'#test2',
data(){
return {
isShow:true
}
}
})
</script>
</body>
</html>
VUE：过渡&动画的更多相关文章
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- vue过渡动画效果
1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
- Vue过渡动画运用transition
vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- vue 过渡 & 动画
过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...
- （学习心路历程）Vue过渡/动画 VS. 过渡/动画
[此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...
- vue过渡动画样式
在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
随机推荐
- 【hihocoder 1312】搜索三·启发式搜索(启发式搜索写法)
[题目链接]:http://hihocoder.com/problemset/problem/1312?sid=1092363 [题意] [题解] 定义一个A*函数 f = step+val 这里的v ...
- 【codeforces 803C】Maximal GCD
[题目链接]:http://codeforces.com/contest/803/problem/C [题意] 给你一个数字n;一个数字k; 让你找一个长度为k的序列; 要求这个长度为k的序列的所有数 ...
- poj 2955 区间dp入门题
第一道自己做出来的区间dp题,兴奋ing,虽然说这题并不难. 从后向前考虑: 状态转移方程:dp[i][j]=dp[i+1][j](i<=j<len); dp[i][j]=Max(dp[i ...
- ES scroll（ES游标） 解决深分页
ES scroll(ES游标) 解决深分页. Why 当Elasticsearch响应请求时,它必须确定docs的顺序,排列响应结果.如果请求的页数较少(假设每页20个docs), Elasticse ...
- git常规使用的命令
注: xxxx代表你的分支名称 1:本地新建一个分支,与远程分支关联: git branch --set-upstream-to origin/xxxx xxxx 2:创建本地分支: git ...
- [Office]PPT 2013如何设置图片为半透明？
PPT里面似乎无法直接为图片设置透明度属性.下面是一种变通的办法. 1,插入一个和图片大小一致的图形(矩形):2,右键插入的矩形,然后在属性设置里选择“图片填充”,选择以需要的图片填充到该矩形里:3, ...
- [GraphQL] Mutations and Input Types
Sometimes, you want to resues object type when doing mutation, you can use 'input' type to help: inp ...
- DAC0832、led、蜂鸣器
52控制DAC0832芯片输出电流,让发光二极管D12由灭均匀变到最亮.再有亮变灭.在最亮和最灭的时候蜂鸣器发出报警声,完毕整个周期的时间是控制在5s左右. #include<reg52.h&g ...
- 【简单的案例分享,停机10分钟】10204升级CRS&DB的PSU至102044
发现一个现象,AIX5.3+HACMP+10.2.0.4RAC+RAW的环境,执行五六年的数据库crsd.log都会报下面错误: ----------------------------------- ...
- servletConfig和ServletContext 以及servletContextListener介绍
<servlet> <servlet-name>BeerParamTests</servlet-name> <servlet-class> ...