不使用动画

<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
<h3 v-if="flag">这是一个H3</h3>
</div>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});

使用过渡类名实现动画

/*<!-- 2. 自定义两组样式,来控制 transition 内部的元素实现动画 -->*/
/* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
} /* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});

修改vue的前缀

 /* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
} /* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
} .my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
} .my-enter-active,
.my-leave-active{
transition: all 0.8s ease;
}
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
<!-- 1. 使用 transition 元素,把 需要被动画控制的元素,包裹起来 -->
<!-- transition 元素,是 Vue 官方提供的 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition> <hr> <input type="button" value="toggle2" @click="flag2=!flag2">
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>
</div>
 /* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
} /* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
} .my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
} .my-enter-active,
.my-leave-active{
transition: all 0.8s ease;
}

第三方类实现动画

需引入css文件:<link rel="stylesheet" href="./lib/animate.css">

<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
<!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<h3 v-if="flag">这是一个H3</h3>
</transition> --> <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition> --> <!-- 使用 :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长 -->
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 400 }">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>
</div>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});

vue-基本动画的更多相关文章

  1. 从零开始学 Web 之 Vue.js(五)Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

  3. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue的动画组件(transition)

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  5. vue学习指南:第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  6. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  7. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

  8. Vue.js 动画

    transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理:     1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...

  9. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  10. router使用以及vue的动画效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. python访问Apollo获取配置

    操作系统 : CentOS7.3.1611_x64 Python 版本 : 3.6.8 Apollo源码地址: https://github.com/ctripcorp/apollo 访问Apollo ...

  2. sql书写和执行顺序

    (8)SELECT (9)DISTINCT<select_list> (1)FROM <left_table> (3)<join_type> JOIN<rig ...

  3. Web安全测试学习笔记-DVWA-SQL注入-1

    SQL注入的定义网上很多,作为一个初学者,我对SQL注入的理解是这样的:网站应用一般都有后台数据库(不论是关系型还是非关系型),用户在网站上的绝大部分操作,最终都会跟数据库交互(也就是执行一串SQL语 ...

  4. go语言之if语句和switch语句和循环语句

    1.if语句 package main import ( "fmt" "io/ioutil" ) func main() { //流程控制 //使用常量定义一个 ...

  5. 挑战10个最难回答的Java面试题(附答案)

    译者:Yujiaao segmentfault.com/a/1190000019962661 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容 ...

  6. 微软、IBM、GitLab 等大厂全部到齐的 OCS 第一天有什么看点?

    在本周一的推文中我们大致介绍了下 Open Core 峰会及到场嘉宾,(≧▽≦) 当然还有 Nebula Graph 在会场的展位位置图,本文我们来看看 Open Core 峰会第一天有哪些值得一看的 ...

  7. Android Gradle 学习笔记(二):Gradle Wrapper

    Wrapper,就是对Gradle的一层包装,便于在团队开发过程中统一Gradle构建的版本.这样大家就可以使用统一的Gradle版本进行构建,避免因为Gradle的版本不统一带来的不必要的问题. 这 ...

  8. 使用adb命令操控Android手机(adb命令)

    1) 手机连接电脑之前 首先,查看安卓手机是否已经连接上电脑 adb devices 让adb一直查找安卓设备,找到后才停止 adb wait-for-device 2) 手机连接电脑后的操作 2.0 ...

  9. Nginx一般配置

    文件为 nginx.conf ,一般配置内容如下: user root;worker_processes auto;#pid /var/run/nginx.pid;#error_log /dev/st ...

  10. Azkaban(3.x)编译安装使用

    官网地址:https://azkaban.readthedocs.io Azkaban 有三种部署方式:单服务模式.2个服务模式.分布式多服务模式 简单实用仅需单服务模式即可 2个服务模式,需要配置m ...