Vue------入离场动画

入离厂动画

官网文档
https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1

1. 包裹任意元素

    <transition name="fade"><element></element></transition>

2. 添加css样式

.fade-enter-active {transition: all .5s;}.fade-enter-active,.fade-leave-active {opacity: 1;background-color: rgba(7, 17, 27, 0.8);}.fade-enter,.fade-leave-to {opacity: 0;background-color: rgba(7, 17, 27, 0);}

3.三方插件法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/animate.css"><!-- 入场 bounceIn --><!-- 离场 bounceOut -->
</head><body><div id="app"><input type="button" value="toggle" @click="flag=!flag"><!-- 需求: 点击按钮, 让h3显示, 再点击按钮, 让h3 隐藏 --><!--         <transitionenter-active-class="animated bounceIn"leave-active-class="animated bounceOut"><h3 v-if='flag'>这是一个h3</h3></transition> --><!-- 使用 :duration 来统一设置 入场 和离场 时候的动画时长(以毫秒计) --><!--         <transitionenter-active-class="bounceIn"leave-active-class="bounceOut":duration="200"><h3 v-if='flag' class="animated">这是一个h3</h3></transition> --><!-- :duration="{ enter: 200, leave: 400 }" 定制进入和移出的持续时间 --><transitionenter-active-class="bounceIn"leave-active-class="bounceOut":duration="{ enter: 200, leave: 400 }"><h3 v-if='flag' class="animated">这是一个h3</h3></transition></div><script>// 创建Vue 实例, 得到 ViewModel var vm = new Vue({el: '#app',data: {flag: false},methods: {/* toggle() {this.flag = !this.flag}*/},})</script>
</body></html>

Vue------入离场动画相关推荐

Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
基于VUE的SVG动画处理（一）
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画一.创建SVG文件方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
Activity左边滑出，右边滑入的动画切换
Activity左边滑出,右边滑入的动画切换转载请注明出处:http://blog.csdn.net/u012301841/article/details/46920809 大家都知道Android ...
vue 使用粒子动画
vue 使用粒子动画 npm 命令 npm install vue-particles --save-dev min.js 引入 import VueParticles from 'vue-parti ...
通过示例了解Vue过渡和动画
作者:Matt Maribojoc 译者:前端小智来源:stackabuse 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://githu ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
VUE学习：vue基础20————动画02：动画
提示: VUE学习:vue基础20----动画01:过渡 VUE学习:vue基础20----动画02:动画前言动画动画使用动画完成过渡效果第三方动画库的使用使用第三方库: 钩子函数前言 ...
android 左进动画,Activity左边滑出，右边滑入的动画切换
Activity左边滑出,右边滑入的动画切换大家都知道Android系统默认Activity间的动画切换效果为:左边滑出.右边滑入.按返回键的动画切换效果为:左边滑入,右边滑出.可是如今的手机制造商 ...

Vue------入离场动画

1. 包裹任意元素

2. 添加css样式

3.三方插件法

Vue------入离场动画相关推荐

最新文章

热门文章