css
·Mr.zuo
这个作者很懒,什么都没留下…
展开
-
VUE之全局API(扩展实例构造器extend)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vu...原创 2019-11-04 18:46:04 · 196 阅读 · 0 评论 -
VUE之全局API(自定义指令directive)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作V...原创 2019-11-04 17:15:36 · 1982 阅读 · 0 评论 -
VUE之多元素组件过渡+动画封装
(1)多元素过渡(2)多组件过渡(3)列表过渡(4)动画封装多元素过渡首先介绍下如何实现多元素过渡(1)利用条件编译指令v-if与v-else实现多元素内容切换.(2)接下来在内容切换基础上,添加过渡动画,例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态(3)状态管理测试后发现并没有过渡效果,分析原因Vue在多个元素切换过程中会尽量复用D...原创 2019-11-04 16:42:26 · 496 阅读 · 0 评论 -
Vue分类筛选器
以下就是小编用Vue写出来的分类选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue分类筛选器</title> <script src="js/vue-2.6.9.min.js"></script> &l...原创 2019-11-01 15:00:12 · 2197 阅读 · 0 评论 -
VUE之过渡动画钩子函数+Velocity.js动画库
前言CSS实现方式目前为止已经介绍了Vue过渡与动画实现方式,包含transition过渡类型动画和@keyframes类型动画。JS钩子函数方式+第三方库除了用CSS来实现vue的组件过渡与动画,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM即可。正如之前所说,可以配合使用第三方 JavaScript 动画库,如 Velocity.jsVelocity.js...原创 2019-10-31 15:11:24 · 1619 阅读 · 0 评论 -
VUE之过渡+动画
大纲(1)页面初始化渲染动画(2)transition过渡+@keyframes动画(3)过渡&&动画时长控制—type属性(4)自定义时长页面初始化渲染动画目前为止,已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果,此时需要用到appear呈现属性和appear-active-clas...原创 2019-10-31 14:45:52 · 335 阅读 · 0 评论 -
VUE之动画与animate.css动画库
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js过渡动画原理在进入/离开的过渡中,会有 6 个...原创 2019-10-31 14:34:30 · 3129 阅读 · 0 评论 -
VUE之过渡transition
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库,如 Velocity.js—JS动画库Vu...原创 2019-10-31 14:20:13 · 389 阅读 · 0 评论 -
静态补充CSS类型转换
块级元素常用的块级block标签:<hn>...</hn> 标题标签<hr> 水平分割线<p>...</p> 段落<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>...原创 2019-10-21 19:43:19 · 91 阅读 · 0 评论