Vue中的过渡效果

这里只写由css实现的简单过渡，js用到在做记录。

过渡效果

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

  1. 在 CSS 过渡和动画中自动应用 class
  2. 可以配合使用第三方 CSS 动画库，如 Animate.css
  3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

  • 条件渲染 （使用 v-if）
  • 条件展示 （使用 v-show）
  • 动态组件
  • 组件根节点
    这里是一个典型的例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
    元素封装成过渡组件之后，在遇到插入或删除时，Vue 将自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。

如果过渡组件设置了过渡的 JavaScript 钩子函数，会在相应的阶段调用钩子函数。

如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，与 Vue，和Vue的 nextTick 概念不同)

过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

Transition Diagram

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <name=”my-transition>” 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制 进入/离开 过渡的不同阶段，在下面章节会有个示例说明。

CSS 过渡

常用的过渡都是使用 CSS 过渡。

下面是一个简单例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.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-active {
  padding-left: 10px;
  opacity: 0;
}

CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

示例： (省略了兼容性前缀)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Look at me!</p>
  </transition>
</div>
new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

自定义过渡类名

我们可以通过以下特性来自定义过渡类名：

enter-class
enter-active-class
leave-class
leave-active-class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如** Animate.css **结合使用十分有用。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

查看更多

分享到 评论

Vue2 中的生命周期

项目从Vue1升级到Vue2，记录常见的改动。

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过以后它会有帮助。
Vue2的生命周期
Vue1和Vue2生命周期的区别

分享到 评论

Html5的file API

在html4的年代，我们如果要在网页上呈现一张用户本地的图片，需要用户先把图片上传到服务器，再根据服务器提供的图片地址把图片下载下来，才能把图片在网页上呈现出来。这一来二往，起码已经费了两倍于这张图片的流量了，更别说服务器为了存储这张图片所花费的资源以及用户上传错了图片的冤枉成本（因为在html4时代，用户选择好图片后，往往只能看到图片的文件名，而无法通过预览图来进一步确认这张图片是否就是自己想要上传的）。html5提供了新玩法，光靠浏览器，就可以对本地的（其实也可以是远程的）文件（主要是图片）进行呈现、读取、处理等操作，而这一切，则是通过html5 file api来实现的。

首先是数据结构，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg）。

file对象不单独存在，而是以数组形式，存在一个名为FileList的数组中。那么，如何拿到这个FileList数组呢？目前，html5有两个途径可以拿到FileList，一是通过file类型的input，二是通过拖放操作的drop事件。

通过file类型的input获取FileList

<input id="file-input" type="file" />
或html5新增的可进行文件多选的multiple属性：

<input id="file-input" type="file" multiple />
一般，我们都是给input:file绑上一个onchange事件，以便在用户选定文件后，马上进行读取文件等下一步操作：

1
2
3
4
5
6
7
8
9
10
11
//原生js
var inputElement = document.getElementById("file-input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files; 
}

//jquery版
$('#file-input').on('change', function() {
    var fileList = this.files;
});

通过拖放操作drop事件

首先要设定一个可供拖放的区域：
<div id="dropbox" style="width: 200px;height: 200px;"></div>
另外，为了能触发drop事件，我们必须阻止dragenter和dragover事件的默认行为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

然后，我们就可以在drop事件的callback中，获取到fileList：

1
2
3
4
5
6
7
8
9
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

查看更多

分享到 评论

flex

转载自阮一峰的网络日志-Flex 布局教程：语法篇

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{ display: flex; }
行内元素也可以使用Flex布局。
.box{ display: inline-flex; }
Webkit内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
项目
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

查看更多

分享到 评论

css3笔记

仅记录一些常用的css3属性

边框

border-radius

向元素添加圆角边框。
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

box-shadow

向盒子添加阴影,支持添加一个或者多个。
box-shadow:X轴偏移 Y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

  1. 阴影模糊半径与阴影扩展半径的区别
    阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
    阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
  2. X轴偏移量和Y轴偏移量值可以设置为负数

    颜色

    Gradient渐变色彩
    CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
    linear-gradient:(to top,#fff,#999)
  • 第一个参数省略时，默认为“180deg”，等同于“to bottom”。
  • 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

查看更多

分享到 评论