Vue——关于css过渡和动画那些事
1. 单元素/组件的过渡transition
Vue 提供了 transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if
) - 条件展示 (使用
v-show
) - 动态组件
- 组件根节点
实例:
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s;
}
</style>
<!-- fade是自定义的名称,会被当成类的前缀 "fade-enter" -->
<div id="app">
<transition name="fade">
<div v-if="show"><h1>show</h1></div>
</transition>
<button @click="handleChange">change</button>
</div>
<script>
new Vue({
el: '#app',
data:{
show: true
},
methods:{
handleChange:function(){
this.show = !this.show;
}
}
})
</script>
2. 过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换:v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to
关于过渡类名:
如果你使用一个没有名字的 <transition>
,则 v-
是这些类名的默认前缀。
如果你使用了 <transition name="my-transition">
,那么 v-enter
会替换为 my-transition-enter
3. 关于@keyframe 动画 (此处省略)
4. VUE中使用第三方animate.css 库, (animate.css库提供的动画是@keyframe的Css3的动画)
首先link引入animate.css,然后结合自定义过渡的类名 enter-active-class、leave-active-class,
animated是必须要写的,hinge shake是引入的动画效果
<div id="app">
<transition enter-active-class="animated hinge" leave-active-class="animated shake">
<div v-if="show">show</div>
</transition>
<button @click="handleChange">change</button>
</div>
<script>
new Vue({
el: '#app',
data:{
show: true
},
methods:{
handleChange:function(){
this.show = !this.show;
}
}
})
</script>
5. 如何在页面加载完成后元素第一次显示时也具备动画效果?
使用appear 和 appear-active-class
<div id="app">
<transition
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing">
<div v-if="show">show</div>
</transition>
<button @click="handleChange">change</button>
</div>
6. 同时使用过渡和动画
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
<div id="app">
<transition
:duration="{enter:5000, leave:10000}" //duration设置动画时间
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing">
<div v-if="show"><h3>show</h3></div>
</transition>
<button @click="handleChange">change</button>
</div>
<script>
new Vue({
el: '#app',
data:{
show: true
},
methods:{
handleChange:function(){
this.show = !this.show;
}
}
})
</script>
7. Vue中多个元素或组件的过渡
- 多个元素的过渡
先上例子:2个元素切换过渡效果
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity .5s;
}
</style>
<div id="app">
<!-- 这有2个div,点击按钮切换显示div内容,
但是需要注意:VUE默认会复用dom元素,导致过渡效果不显示,
解决: 添加唯一值key属性可以标识独立的dom,避免复用
mode是transition自带的属性,可以是out-in 或者 in-out -->
<transition mode="out-in">
<div v-if="show" key="hello">hello vue</div>
<div v-else key="Bye">Bye Vue</div>
</transition>
<button @click="handleClick">change</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
show: true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
- 多个组件的过渡
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity .5s;
}
</style>
<div id="app">
<transition mode="in-out">
<!-- <child v-if="show"></child>
<child-one v-else></child-one> -->
<!-- 动态组件 -->
<component :is="type"></component>
</transition>
<button @click="handleClick">change</button>
</div>
<script>
Vue.component('child',{
template: '<div>child</div>'
});
Vue.component('child-one',{
template: '<div>child-one</div>'
})
var vm = new Vue({
el: '#app',
data:{
type: 'child'
},
methods:{
handleClick:function(){
this.type = (this.type === 'child'?'child-one' : 'child');
}
}
})
</script>
8. 列表过渡使用 transition-group
<div id="app">
<transition-group>
<div v-for="item of list" :key="item.id">
{{item.title}}-{{item.id}}
</div>
</transition-group>
<button @click="handleAdd">Add</button>
</div>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
<script>
var count = 0;
new Vue({
el: '#app',
data:{
list:[]
},
methods:{
handleAdd:function(){
this.list.push({
id: count++,
title: 'hello vue'
})
}
}
})
</script>
Vue——关于css过渡和动画那些事的更多相关文章
- Vue API 4 (过渡和动画)
transition name 用于自动生成 CSS 过渡类名.例如:name: fade 将自动拓展为 .fade-enter ,.fade-enter-active等.默认类名为 "v& ...
- 047——VUE中css过渡动作实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在vue中同时使用过渡和动画
在上次的动画中,在显示和隐藏有动画效果,但是,刷新页面的时候,第一次的显示没有动画效果 需求:刷新页面的时候也有动画效果 <transition name='fade' appear enter ...
- CSS过渡、动画及变形的基本属性与运用
[逆战班] 动画可以让一个元素具有动态的效果,这个过程是使元素从一种样式变成另一个样式的过程.我们可以通过设置关键帧的方法来控制动画在某个时间节点的运动方式.通常设置多个节点来实现复杂的动画效果.0% ...
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
- 058_末晨曦Vue技术_过渡 & 动画之过渡的类名
进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...
- 过渡与动画 - steps调速函数&CSS值与单位之ch
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- Vue入门笔记#过渡
Vue过渡,可以在元素从DOM中移除,插入时自动调用过渡效果.根据设定,会适时的触发过渡效果. 在使用的目标标签里添加 transition: <div transition="my_ ...
随机推荐
- Java类——JDBC链接、并操作MySQL数据库
Java——MySQL数据库操作类 package pkg.src.database; import java.sql.*; public class MYSQL_DBManager { // //定 ...
- 用navicat工具创建MySQL存储过程
使用Navicat for MySQL工具创建存储过程步骤: 1. 新建函数(选择函数标签 -> 点击新建函数): 2.输入函数的参数个数.参数名.参数类型等: 3.编写存储过程: 代码如下: ...
- Python爬虫教程-27-Selenium Chrome版本与chromedriver兼容版本对照表
我们使用Selenium+Chrome时,版本不一样, 会导致 chromedriver 停止运行 chromedriver 所有版本下载链接:http://npm.taobao.org/mirror ...
- hack (浏览器兼容css hack)
1.hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内 ...
- Nginx(持续更新中)
Nginx介绍 -- 安装部署 -- 配置文件说明 --
- SQL Server ->> 更改服务器时区对SQL Server Agent服务器的影响
昨天在把服务器的时区从PST改成UTC后,发现Job都不跑了.因为SQL Server Agent记录Job的历史运行时间是不区分时区的,也就是意味着我改后出现了最后一条运行记录比倒数第二条时间还要早 ...
- VS配置Qt
https://blog.csdn.net/qq_35488967/article/details/71516640
- for循环里面的break;和continue;语句
for循环里面的break;和continue;语句 break语句 哇,我已经找到我要的答案了,我不需要进行更多的循环了! 比如,寻找第一个能被5整除的数: for循环中,如果遇见了break语句, ...
- Yii2用Gii自动生成Module+Model+CRUD
1. 开启gii模块 common/config/main-local.php加入下面代码 return [ 'modules' => [ 'gii' => [ 'class' => ...
- 洛谷 P4321 【随机漫游】
题目大意 给出\(n(n\leq 18)\)个点的无向连通图,\(m(m\leq 10^5)\)次询问.每次询问给出一个点集和一个起点\(s\),询问从\(s\)出发,经过这个点集中的每一个点至少一次 ...