Vue（十四）过渡（动画）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<style> p{
width: 300px;
height: 300px;
background-color:red;
}
.fade-enter-active,.fade-leave-active{
transition:all 3s ease;
}
.fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:50px;
height:50px;
}
/* .fade-enter需要放在.fade-enter-active的后面 */
.fade-enter{
opacity:0;
width: 100px;
height: 100px;
} </style> </head> <body> <div id="itany">
<button @click="flag=!flag">点我</button> <transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-show="flag">网博</p>
</transition>
</div> <script>
var vm=new Vue({
el:'#itany',
data:{
flag:false
},
methods:{
beforeEnter(el){
// alert('动画进入之前');
},
enter(){
// alert('动画进入');
},
afterEnter(el){
// alert('动画进入之后');
el.style.background='blue';
},
beforeLeave(){
// alert('动画即将之前');
},
leave(){
// alert('动画离开');
},
afterLeave(el){
// alert('动画离开之后');
el.style.background='red';
}
}
});
</script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<link rel="stylesheet" href="css/animate.css">
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){ var vm = new Vue({
el:'#app',
data:{
flag:false
}
}) } </script> <style>
p{
width: 300px;
height: 300px;
background-color: red;
margin:0 auto;
}
</style> </head> <body> <div id="app">
<button @click="flag=!flag">点我</button> <transition enter-active-class="animated rollIn" leave-active-class="animated rollOut">
<p v-show="flag">网博</p>
</transition>
</div> </body> </html>
<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutLeft">
<p v-show="flag" :key="1">你好</p>
<p v-show="flag" :key="2">世界</p>
</transition-group>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<link rel="stylesheet" href="css/animate.css">
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){ var vm = new Vue({
el:'#app',
data:{
flag:true,
arr:['tom','jack','mike','alice','alex','mark'],
name:''
},
/* 计算属性 */
computed:{
arr2:function(){
var temp=[];
this.arr.forEach(val => {
if(val.includes(this.name)){
temp.push(val);
}
});
return temp;
}
}
}) } </script> <style>
p{
width: 50px;
height: 50px;
background-color: red;
margin:0 auto;
}
</style> </head> <body> <div id="app">
<input type="text" v-model="name">
<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<p v-for="(v,k) in arr2" :key="k">
{{v}}
</p>
</transition-group>
</div> </body> </html>
Vue（十四）过渡（动画）的更多相关文章
- VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move
本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...
- Vue - 解决路由过渡动画抖动问题
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
- 058_末晨曦Vue技术_过渡 & 动画之过渡的类名
进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...
- vue.js之过渡动画
vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...
- Vue.js 之 过渡动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡
多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...
- android 学习随笔二十四（动画：帧动画）
帧动画,一张张图片不断的切换,形成动画效果 * 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长 * FrameAnimatio ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- Vue相关(过渡动画)
Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...
随机推荐
- EF批量插入数据（Z.EntityFramework.Extensions）
EF用原生的插入数据方法DbSet.ADD()和 DbSet.AddRange()都很慢.所以要做大型的批量插入只能另选它法. 1.Nugget 2.代码 using EF6._0Test.EF; u ...
- springboot1.5.4 集成cxf完整实例
WebService 服务端 添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xml ...
- php把一些预定义的 HTML 实体转换为字符。
htmlspecialchars_decode() echo htmlspecialchars_decode($condition,ENT_QUOTES) ' 会被转成 单引号
- 洛谷---小L和小K的NOIP考后放松赛
链接: https://www.luogu.org/contestnew/show/11805?tdsourcetag=s_pcqq_aiomsg 题解: 没人过的题我就没看 t2: 考虑每个点是朋友 ...
- Asp.net 与 UCenter 用户同步之实施过程
在写这篇文章的时候,我还在想,这篇文章也许能给你带来一些收获,但或许会令你更加的迷茫,为什么会这样?因为:1.UCenter虽然足够强大,但正为它的强大,它的不少暗箱操作使得我们望而生畏,我们不害怕出 ...
- 一起学Hadoop——实现两张表之间的连接操作
---恢复内容开始--- 之前我们都是学习使用MapReduce处理一张表的数据(一个文件可视为一张表,hive和关系型数据库Mysql.Oracle等都是将数据存储在文件中).但是我们经常会遇到处理 ...
- zabbix_agent YUM源配置
wget http://repo.zabbix.com/zabbix/3.0/rhel/5/x86_64/zabbix-release-3.0-1.el5.noarch.rpm rpm -ivh za ...
- 将程序sublime添加到右键菜单中
新建wangzhaobo.bat复制一下代码, 粘贴保存,然后打开. @echo Off :START CLS echo *====================================== ...
- div 内容自动换行
如图: 1.自动换行 <div style="widht:100%;height:100%;word-wrap: break-word">111111111111111 ...
- B-number 数位dp
求有 13且能被13整除的个数 显然已目前的四个状态无法对问题进行完全解答了 关于能否被13整除 有必要加一个mod状态 当pre为2的时候说明已经存在过13了(直接继承即可) 当pre为1说 ...