这是 JavaScript 框架 Vue.js 五篇教程的第五部分。在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来)。这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以及它的用途。http://www.cnblogs.com/nzbin/p/6380679.html
内置的 <transition>
和 <transition-group>
组件同时支持 CSS 和 JS 钩子。如果你熟悉 React , transition 组件的概念对你并不陌生,因为在生命周期钩子中,它与 ReactCSSTransitionGroup
类似,但也有显著的差异 ,这让书呆子的我很兴奋。
我们先讨论 CSS 过渡,然后再讨论 CSS 动画,之后介绍 JS 动画钩子以及动画的生命周期方法。过渡状态超出了本文的范围,但这是可能的。这是我为此做的一个评价不错的例子 。只要能得到充足的休息,我确信会写那篇文章。
你可能不明白为什么过渡和动画在这篇文章中分成了不同的部分,让我解释一下,虽然它们很相似,但也有不同的地方。过渡就是从一个状态向另一个状态插入值。我们可以做很多复杂的事情,但是很简单。从起始状态,到结束状态,再回来。
动画有点不同,你可以在一个声明中设置多个状态。比如,你可以在动画 50% 的位置设置一个关键帧,然后在 70% 的位置设置一个完全不同的状态,等等。你可以通过设置延迟属性实现很复杂的运动。动画也可以实现过渡的功能,只需要从头到尾插入状态,但是过渡无法像动画一样插入多个值。
在工具方面,两者都是有用的。过渡如同一把“锯”而动画如同“电锯”。有时你需要明白一件事,购买昂贵的设备可能是愚蠢的。对于大型项目,投资“电锯”更有意义。
了解了这些知识之后,再来讨论 Vue!
假设有一个简单的模态窗。通过点击按钮显示或隐藏模态窗。根据前面的部分, 我们可以这样做:创建一个按钮的 Vue 实例,在实例中创建一个子组件,设置数据的状态,这样可以通过切换布尔值并添加事件处理实现子组件的显示及隐藏。我们可以使用 v-if
或者 v-show
来切换组件可见性。也可以使用 slot 放置模态窗的切换按钮。
<div id="app"> <h3>Let's trigger this here modal!</h3> <button @click="toggleShow"> <span v-if="isShowing">Hide child</span> <span v-else>Show child</span> </button> <app-child v-if="isShowing" class="modal"> <button @click="toggleShow"> Close </button> </app-child> </div> <script type="text/x-template" id="childarea"> <div> <h2>Here I am!</h2> <slot></slot> </div> </script>
const Child = { template: '#childarea' }; new Vue({ el: '#app', data() { return { isShowing: false } }, methods: { toggleShow() { this.isShowing = !this.isShowing; } }, components: { appChild: Child } });
可以正常工作,但是这样的模态窗有点不和谐。