黑马程序员技术交流社区

标题: 【西安校区】Vue中动画的使用 [打印本页]
作者: 西安前端组    时间: 2018-5-24 11:00
标题: 【西安校区】Vue中动画的使用
Vue中动画的使用
Vue的中动画，并不像想象中的那样强大，它只能控制标签或者组件的显示到隐藏，或者隐藏到显示的过程。
所以它能控制的过程有两个：
1、从显示到隐藏
2、从隐藏到显示
而Vue的指令中，恰好有v-if和v-show正是控制元素或者标签的显示或者隐藏的，所以vue的动画，往往需要在标签中结合v-if或者v-show来进行使用。

下面介绍几种动画实现的方式：        
1、使用自己写类样式来实现动画
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
如何理解以上代码呢？
给了h3外包裹了一层transition之后，当h3通过v-if或者v-show进行显示        或者隐藏的时候，Vue会给h3标签增加一系列类样式。
以隐藏到显示的过程说明：
(1)   v-enter这个是vue在即将动画开始的一瞬间为元素增加的，然后瞬间移除。我们可以自己写一个class类样式就叫做v-enter,在v-enter中设置该元素在此状态下的初始值。
.v-enter{
transform:translateX(400px);
}
(2)   v-enter-active这个是在整个动画的过程中都存在的类样式。我们可以自己写一个类样式就叫做v-enter-active,在v-enter-active中设置该元素的过渡规则。
.v-enter{
transition:transform 1s linear;
}

(3)  v-enter-to这个是在整个动画的过程中都存在的类样式，但是添加该类的时机比v-enter-active更晚一点.我们可以在v-enter-to设置元素的目标位置。

所以总结如下：
                        v-enter 设置元素的初始状态  
                        v-enter-to 设置元素的结束状态
                        v-enter-active 设置过渡规则
                我们也可以更改类样式的前缀，将v-中的v变成我们自己想要的名称，通过name属性指定
                        <transition name="haha">
                          <h3 v-if="flag">这是一个H3</h3>
                        </transition>
2、使用第三方库Animate.css
                从1中我们知道Vue会给h3标签增加一系列类样式，样式的名称默认是v-xxx的形式,如果我们想改变这些
                类样式名称，让他使用Animate中已经有的类样式名称，可以给transition设置
                <transition
                        enter-active-class="bounceIn" ,
                        enter-to-class="haha" ,
                        leave-active-class="bounceOut"
                        :duration="{ enter: 20000, leave: 40000 }">
                          <h3 v-if="flag" class="animated">这是一个H3</h3>
                </transition>

                :duration控制的不是动画的时长，而是样式存在的时长
3、使用回调函数
                <transition
                  @before-enter="beforeEnter"
                  @enter="enter"
                  @after-enter="afterEnter">
                  <div class="ball" v-show="flag"></div>
                </transition>
                data:{
                        flag:false
                },
                methods:{
                        afterEnter(){
                                this.flag = !this.flag
                        }
                }
4、列表动画
                元素如果是通过v-for方式来循环渲染，transition这个标签就不知道该加给谁
                <transition-group appear tag="ul">
                        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
                          {{item.id}} --- {{item.name}}
                        </li>
        </transition-group>

           依然要写v-xxx的类样式，参照动画第一种使用方式

           删除元素时，其他元素会增加的类样式
           .v-move {
                        transition: all 6s ease;
                }

                这个是为了让被删除的元素不占位，不占位了，它下边的元素就能往上走
                而我们在v-move中有设置了过度规则，所以会慢慢的往上走
                .v-leave-active{
                  position: absolute;
                }  

                appear 第一次加载的时候，给列表的所有元素执行动画
                tag：默认transition-group会给所包裹的标签增加一个大的父容器span
                        如果由于这个span产生了问题，比如样式运用不上等，那么我们可以修改这个值






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2