Vue的过渡是一种技术,它可以让你在Vue应用程序中创建动画和过渡效果。它可以帮助你在不同的状态之间创建平滑的过渡,从而使你的应用程序看起来更加流畅。
Vue的过渡是基于CSS3实现的,它可以让你使用CSS3中的transition属性来创建动画效果。例如,你可以使用transition-property来设置要过渡的CSS属性,transition-duration来设置过渡时间,transition-timing-function来设置过渡速度,以及transition-delay来设置过渡延时。
Vue也允许你使用JavaScript代码来创建动画效果。例如,你可以使用Vue.js中的v-if、v-show、v-for、v-on、v-bind或者其他相关API来创建动态效果。
此外,Vue也允许你使用JavaScript代码与CSS3 transition API配合使用,从而创造出复杂的动态效果。例如:
// 在 JavaScript 中定义一个 transition 效果 var myTransition = { beforeEnter: function (el) { el.style.opacity = 0; }, enter: function (el, done) { Velocity(el, { opacity: 1 }, { duration: 300 }); // 动画执行完成后执行回调函数 done() done(); }, leave: function (el, done) { Velocity(el, { opacity: 0 }, { duration: 300 }); // 动画执行完成后执行回调函数 done() done(); } }; // 将 transition 效果注册为 Vue 的元素 Vue.transition('myTransition', myTransition); // 将 transition 效果应用于 Vue 的元素上...
Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:
所有的原始数字都被事先存储起来,可以直接转换到数字。做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态。
通过 watcher 我们能监听到任何数值属性的数值更新。可能听起来很抽象,所以让我们先来看看使用Tweenjs一个例子:
<script src="https://unpkg.com/tween.js@16.3.4" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>
new Vue({
el: "#animated-number-demo",
data: {
number: 0,
animatedNumber: 0
},
watch: {
number: function(newValue, oldValue) {
var vm = this
function animate (time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 500)
.onUpdate(function () {
vm.animatedNumber = this.tweeningNumber.toFixed(0)
})
.start()
animate()
}
}
})
0
当你把数值更新时,就会触发动画。这个是一个不错的演示,但是对于不能直接像数字一样存储的值,比如 CSS 中的 color 的值,通过下面的例子我们来通过 Color.js 实现一个例子:
<script src="https://unpkg.com/tween.js@16.3.4" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://unpkg.com/color-js@1.0.3/color.js" rel="external nofollow" ></script>
<div id="example-7">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>
var Color = net.brehaut.Color
new Vue({
el: "#example-7",
data: {
colorQuery: "",
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
},
created: function () {
this.tweenedColor = Object.assign({}, this.color)
},
watch: {
color: function () {
function animate (time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween(this.tweenedColor)
.to(this.color, 750)
.start()
animate()
}
},
computed: {
tweenedCSSColor: function () {
return new Color({
red: this.tweenedColor.red,
green: this.tweenedColor.green,
blue: this.tweenedColor.blue,
alpha: this.tweenedColor.alpha
}).toCSS()
}
},
methods: {
updateColor: function () {
this.color = new Color(this.colorQuery).toRGB()
this.colorQuery = ""
}
}
})
.example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}
Preview:
#000000
就像 Vue 的过渡组件一样,数据背后状态转换会实时更新,这对于原型设计十分有用。当你修改一些变量,即使是一个简单的 SVG 多边形也可是实现很多难以想象的效果。
查看该 fiddle,了解上面演示的完整代码。
管理太多的状态转换的很快会接近到 Vue 实例或者组件的复杂性,幸好很多的动画可以提取到专用的子组件。我们来将之前的示例改写一下:
<script src="https://unpkg.com/tween.js@16.3.4" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>
// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// strategies.
Vue.component("animated-integer", {
template: "<span>{{ tweeningValue }}</span>",
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue: 0
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate (time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, 500)
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})
.start()
animate()
}
}
})
// All complexity has now been removed from the main Vue instance!
new Vue({
el: "#example-8",
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})
20 + 40 = 60
我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。总之,对于完成各种过渡动效几乎没有阻碍。
Vue.js2.0Render 函数基础Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScri...
自定义指令简介除了默认设置的核心指令(v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式...
Vue.js2.0混合基础混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合...
Vue.js2.0 开发插件插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种:添加全局方法或者属性,如:vue-eleme...