问题陈述--为什么是动画？
网站UI开发不是为了让事情变得漂亮。它是关于网站性能和客户体验的。根据亚马逊和沃尔玛的研究，他们发现在增加用户互动时间时，转换率/收入会下降，因为用户在互动过程中感到被打断。另一项研究发现，与普通的加载器相比，定制的动画加载器的等待时间更长，放弃率更低，因为用户对前一个加载器的互动感更强。
简而言之，你的应用程序的动画应该对用户更有互动性和吸引力，有点像电影院的预订应用程序和一个位置标签内的表格，例如。
什么是VueJS？
对于那些熟悉Angular和ReactJS的人来说，VueJS是一个渐进的JavaScript框架，支持一些功能:
- 一个虚拟的DOM
- 声明式渲染
- 计算的属性
- 反应式组件
- 条件性渲染......仅举几例
其中一些功能与Angular和ReactJS已经提供的功能很相似。然而，你可以看看它与其他框架的比较。
Todo列表实例
让我们举一个简单的例子：Todo列表，其中包含一个任务列表，具有向/从列表中添加/删除任务的功能。
这将是我们在HTML文件中的视图，假设你已经在script 标签中包含了VueJS:
<div id="app">
<input type="text" v-model="task"/>
<input type="button" value="Add" v-on:click="addTaskToList"/>
<ul>
<li v-for="(todo, index) in todoList">
{% raw %}{{ todo }}{% endraw %}
<input type="button" value="Remove" v-on:click="removeTaskFromList(index)"/>
</li>
</ul>
</div>
同时，我们的JS文件看起来像这样:
var app = new Vue({
el: '#app',
data: {
task: 'my first task',
todoList : []
},
methods : {
addTaskToList : function(){
this.todoList.push(this.task);
},
removeTaskFromList : function(index){
this.todoList.splice(index, 1);
}
}
});
代码本身是不言自明的。它只是用addTaskToList 方法在todoList 内添加一个task ，然后用removeTaskFromList 从列表中删除。
HTML中的事件绑定和循环语法看起来与你在AngularJS中看到的相似。然而，VueJS中的变量和方法的语法是不同的，这让你想起了你在**C++**中编码的私有变量和公共方法。你可以查看这个演示。
让我们在这里面添加更多的交互。一个确认弹出窗口应该出现，有OK 和Cancel 选项。无论选择什么选项，弹出窗口都应该在以后关闭。
在HTML中，让我们修改列表元素:
<li v-for="(todo, index) in todoList">
{% raw %}{{ todo }}{% endraw %}
<input type="button" value="Remove" v-on:click="onRemoveTask(index)"/>
</li>
并添加一个新的弹出式元素:
<div v-show="isPopupOpen">
Are you sure you want to remove this from Todo List?<br/>
<input type="button" value="OK" v-on:click="confirmRemove()"/>
<input type="button" value="Cancel" v-on:click="cancelRemove()"/>
</div>
同时在JS中，初始化里面的新数据变量:
data: {
isPopupOpen : false,
currentIndex: -1
}
还有，添加一些方法:
methods : {
onRemoveTask : function(index) {
this.isPopupOpen = true;
this.currentIndex = index;
},
confirmRemove : function() {
this.removeTaskFromList(this.currentIndex);
this.isPopupOpen = false;
},
cancelRemove : function() {
this.isPopupOpen = false;
}
}
让我们在其中添加一些动画。
为了淡入/淡出弹出窗口，你需要将我们的弹出窗口包裹在transition 标签中:
<transition name="fade">
<div v-show="isPopupOpen">
… Pop-up element content
</div>
</transition>
这个元素负责处理过渡逻辑。你不需要理会何时开始或停止过渡。你所要提到的是你想看到什么样的过渡和多长时间。这可以通过VueJS提供的一些CSS类来完成:
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
注意:这个类中使用的fade 前缀应该与transition 组件的name 属性相匹配。
为了在弹出式窗口出现后模糊表单和列表元素，它们应该被包裹在一个使用v-bind 属性的有条件约束的容器内。
<div v-bind:class="[isPopupOpen ? 'disabled' : '', ‘container’]">
… Form and Todo List element content
</div>
并添加所需的CSS:
.container {
transition: all 0.05s ease-out;
}
.disabled {
filter: blur(2px);
opacity: 0.4;
pointer-events: none; // This makes sure that nothing else is clicked other than pop-up options
}
优势
- 清洁
- 语义
- 可维护
这就是你如何以更简单和语义的方式创建应用程序和制作动画。然而，你必须有HTML、CSS和JavaScript的中级知识。如果你认为VueJS很有前途，就去试试吧。还有很多东西你会喜欢去了解的。看看官方文档吧。
