vue.js trasition动画效果,vue.js动画
================================
©Copyright 蕃薯耀 2018年12月07日
http://fanshuyao.iteye.com/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue.js trasition动画效果</title> <style type="text/css"> /*xxx-enter-active, xxx-leave-active*/ .myFade-enter-active, .myFade-leave-active { transition: opacity 1s; } .myFade-enter, .myFade-leave-to /* .myFade-leave-active below version 2.1.8 */ { opacity: 0; } /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; } </style> </head> <body> <div id="vueDiv"> <div style="margin-top: 30px;"> <div v-show="isShow">这是内容显示或者隐藏的动画效果。</div> <input type="button" value="隐藏/显示" @click="isShow=!isShow"/> </div> <div style="margin-top: 30px;"> <div>-----这里加上动画效果-----</div> <div style="margin-top: 15px;"> <transition name="myFade"> <div v-show="isShowTransition">淡入浅出动画效果。</div> </transition> <input type="button" value="隐藏/显示" @click="isShowTransition = !isShowTransition"/> </div> </div> <div style="margin-top: 30px;"> <div>-----这里加上动画效果2-----</div> <div style="margin-top: 15px;"> <transition name="slide-fade"> <div v-show="isSideFade">淡入浅出动画效果2。</div> </transition> <input type="button" value="隐藏/显示" @click="isSideFade = !isSideFade"/> </div> </div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> var vueObj = new Vue({ el : "#vueDiv", data : { isShow : true, isShowTransition : true, isSideFade : true } }); </script> </body> </html>
================================
©Copyright 蕃薯耀 2018年12月07日
http://fanshuyao.iteye.com/
相关推荐
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用,它提供了全局范围的 Vue 构造函数和一些全局...
内容:vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js和vue.min.js
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js ...
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲....
目前社区有很多 Vue.js 的源码解析文章,但是质量层次不齐,不够系统和全面,这本电子书的目标 是全方位细致深度解析 Vue.js 的实现原理,让同学们可以彻底掌握 Vue.js。 为了把 Vue.js 的源码讲明白,课程设计成...
学完本系列课程后,学员将会达到学习目标:只要具有JavaScript基础的学员都能灵活运用Vue.js技术设计前端程序。 实践阶段由浅入深分为四个案例:动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了Vue...
vue.min.js官方2.6.14版本
vue.js和vue.min.js和node.js的安装配置包(详细安装说明请见我的另一个博文node.js和vue.js安装配置)
Vue.js 技术揭秘
基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue...
Vue.js 架构学习
vue实战开发.快速上手.好不容易找到电子版.非PDF版
现在chrome应用市场,打不开了。 下载了插件有的时候会被自动删除。 vue.js devtools 离线插件 最新版本 6.2.1 亲测可用
第1章 初识Vue.js 第2章 数据绑定和第一个Vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置指令 第6章 表单与v-model 第7章 组件详解 第8章 自定义指令 第9章 Render函数 第10章 使用webpack 第...