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中什么是动画 开始先啰嗦一下,动画的解释(自我理解
随机推荐
- HDU 3567 Eight II
Eight II Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ID: 3 ...
- 使用IO,递归打印目录树
package chengbaoDemo; import java.io.File; import java.io.IOException; public class TestIOFile { pub ...
- spring datasource和mybatis的datasource来源在哪里
配置一个数据源 spring在第三方依赖包中包含了两个数据源的实现类包,其一是Apache的DBCP,其二是 C3P0.可以在Spring配置文件中利用这两者中任何一个配置数据源. 配置一个 ...
- HDU 2553 N皇后问题 （DFS_回溯）
Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即随意2个皇后不同意处在同一排,同一列,也不同意处在与棋盘边框成45角的斜线上. 你的任务是.对于给定的N ...
- 漫说好管理vs.坏管理
天地会珠海分舵注:本文英文版来自Medium今日热点头条.漫画简单明了,全文差点儿没有多余的语言去装饰.两天内获得两千三百多个推荐,且读者的反馈也相当的热烈.中文版由天地会珠海分舵编译后分享给大家. ...
- 沃通SSL精灵，让站点HTTPS永只是期
告别HTTP明文"裸奔"时代 百度.阿里巴巴.必应等越来越多的互联网巨头相继启用全站HTTPS加密,保护用户数据和隐私安全.逐步告别HTTP明文"裸奔"时代. ...
- POJ - 3257 Cow Roller Coaster （背包）
题目大意:要用N种材料建一条长为L的路,如今给出每种材料的长度w.起始地点x.发费c和耐久度f 问:在预算为B的情况下,建好这条路的最大耐久度是多少 解题思路:背包问题 dp[i][j]表示起始地点为 ...
- HDU 2874 LCA离线算法 tarjan算法
给出N个点,M条边.Q次询问 Q次询问每两点之间的最短距离 典型LCA 问题 Marjan算法解 #include "stdio.h" #include "strin ...
- 2016.03.02,英语,《Vocabulary Builder》Unit 03
ambi/amphi: 指on both sides或者around的意思,ambi-来自拉丁语,amphi-来自希腊语.ambidextrous:[ˌæmbi'dekstrəs] adj. 两手俱利 ...
- 42.写入XML
#include <QtGui> #include <QtXml> #include <iostream> //创建一个树结构 void populateTree( ...