动画

动画

---

一、常用动画属性

1、Transition

Transition(转变)能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

语法：

transition: property duration timing-function delay;

例子：

div { opacity: 1; transition: opacity 1s linear; } div:hover { opacity: 0; }

2、Animation

动画可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法：

transition: property duration timing-function delay;

例子：

#anim { width: 100px; height: 100px; background-color: pink; animation: go 2s ease 0s 2 ; /*声明动画*/ } /*定义动画*/ @keyframes go { from { /*0%*/ transform: translateX(0px); } to { /*100%*/ transform: translateX(100px); } }

3、Transform

Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法：

transform: none|transform-functions;

例子：

.center { width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%,-50%); }

二、Vue中动画原理

Vue通过在元素显示、隐藏过程中添加相应的CSS来实现过渡和动画效果。

例子：

<style> .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 1s; } .fade-leave-to { opacity: 0; } .fade-leave-active{ transition: opacity 1s; } </style> <div id="root"> <transition name="fade"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">toggle</button> </div> <script> var app = new Vue({ el: '#root', data: { show: true }, methods: { handleClick: function () { this.show = !this.show; } } }) </script>

三、在Vue中使用 animate.css 库

通过引入 animate.css 库，Vue 中可以直接使用 animate.css 中已经定义好的动画，大大减少了编写复杂动画的工作量。

例子：

<div id="app"> <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake" > <div v-show="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div>

四、在Vue中使用 Velocity.js 库

不同于 animate.css 使用 CSS3 实现动画效果，Velocity.js 是一个 JS 的动画库，可以实现更为复杂的动画效果。 例子：

<div id="app"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" > <div v-show="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: '#app', data: { show: true }, methods: { handleClick() { this.show = !this.show }, handleBeforeEnter(el) { el.style.opacity = 0 }, handleEnter(el, done) { Velocity(el, { opacity: 1 }, { duration: 1000, complete: done }) }, handleAfterEnter(el) { console.log('动画结束') } } }) </script>

五、在项目中使用 CSS3 动画

1、在小程序的商品浏览页面，实现一个滚屏效果

首先在页面中定义好每一屏要应用的 CSS 类

<view class="right-box {{transClassArr[currentMenuIndex]}}"> <view class="foods-type-box"> <template is="categorydetail" data="{{categoryInfo:categoryInfo0}}"/> </view> <view class="foods-type-box"> <template is="categorydetail" data="{{categoryInfo:categoryInfo1}}"/> </view> <view class="foods-type-box"> <template is="categorydetail" data="{{categoryInfo:categoryInfo2}}"/> </view> <view class="foods-type-box"> <template is="categorydetail" data="{{categoryInfo:categoryInfo3}}"/> </view> <view class="foods-type-box"> <template is="categorydetail" data="{{categoryInfo:categoryInfo4}}"/> </view> <view class="foods-type-box"> <template is="categorydetail" data="{{categoryInfo:categoryInfo5}}"/> </view> </view>

然后在 CSS 中使用 transform 定义过渡效果

.right-box{ flex: 1; transition: all 500ms ease-in-out; } .tanslate0{ transform:translate(0,0); } .tanslate1{ transform:translate(0,-100vh); } .tanslate2{ transform:translate(0,-200vh); } .tanslate3{ transform:translate(0,-300vh); } .tanslate4{ transform:translate(0,-400vh); } .tanslate5{ transform:translate(0,-500vh); }

2、使用总结

优点：通过使用动画，切换每一屏不再是一个生硬的显示与隐藏，而是一个平滑的过渡效果，提高了用户的使用体验 缺点：需要巧妙的设置好页面的结构和对应的CSS，增加了开发的工作量