动画,与动画库的使用

[TOC] ## 简单动画 ```

//css .list-mark background:rgba(7,17,27,0.6) &.v-enter-active,&.v-leave-active transition:all 0.3s linear &.v-enter,&.v-leave-to opacity:0 background:rgba(7,17,27,0) ``` ## 复杂动画 ```

//css .cart-decrease color:#068dc7 .inner line-height:24px font-size:24px &.v-enter-active,&.v-leave-active transition:all 0.3s linear &.v-enter,&.v-leave-to opacity:0 transform:translate3d(30px, 0, 0) .inner transform:rotate(180deg) ``` 如果一个元素需要表示两种动画轨迹如移动加旋转,则可以分离出一个 `span` 然后在分别给 父类和子类添加不同的动画 ## 给组件中添加动画 可直接在组件中添加动画 ``` ``` ### animate.css `npm install animate.css -S` ``` import animate from ‘animate.css’ Vue.use(animate) ``` 在vue中 ``` transition // //注意此处有 class 为 animated

hello word 1

//

hello word 2

//

word 1

word 1

// ```