s

Vue动画

Vue自带的动画效果通过六个类实现:

       v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

            v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

            v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

            v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

            v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

            v-leave-to: 2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
其中 v-enter,v-enter-to,v-leave,v-leave-to 是四个时间点,而v-enter-active,v-leave-active是两个时间段,这个时间段里面就可以设置动画的过度时长以及过度效果
 
实现动画的前提:
  •  必须用<transition></transition>标签将元素包裹起来

 

使用第三方的动画库,这里使用 animate.css 这个库,有官网!

  使用animate.css:

  step1:引入animate.css

  step2:transition 标签中加上 enter-active-class,leave-active-class这两个属性,表示离开和进度动画分别应用哪个class!! enter-active-class="animate.css动画类名"  leave-active-class="class_name",

  step3:给要加动画的元素加上  class='animated'.

  完成这三个步骤就可以套用animate.css中动画样式了!

 

也可以定义javascript钩子

  在 attribute 中声明 JavaScript 钩子

  

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

之后在vue实例 methods属性中定义上相应的钩子,这些钩子函数第一个参数都是,绑定动画的那个元素,也就是包裹在transition中那个元素。然后用js动态为这个dom元素添加动画样式就可以实现特定动画,比如半程动画【只定义进入的钩子】【添加购物车这个动画效果就是半程动画】。

 

列表动画

  一组元素【例如ul里面的li】要实现动画效果,必须用 <transition-group ></transition-group>包裹。

<!-- 如果 想要实现动画效果的元素是通过v-for循环生成的,不能使用<transition>包裹
            而是应该用 <transiton-group> 包裹  也是vue提供
                而且v-for的每一循环项都必须带有 :key 唯一标识符属性 -->

        <!-- <ul> -->
        <!-- 页面刷新此时li会直接显现在页面,在 transition-group 标签加上 appear 属性,可以实现出场效果 -->
        <!-- transition-group 有个很重要属性 tag 可以设置transition-group 最终被渲染为什么类型的元素,默认是span 如果是想ul的话,就可以吧外面的ul标签去掉,加上tag='ul'   -->
        <transition-group appear tag="ul">
            <li v-for="item in list" :key="item.id">
                {{ item.id }} --- {{ item.val }}
            </li>
        </transition-group>
        <!-- </ul> -->

    </div>

    <!-- 添加删除 li动画效果,
                注意:删除li,如果后续还有,li,后面的li会往上顶,默认是是直接往前顶,没有过度。希望看到的效果是慢慢的往前顶,也如排队一样,前面的人走了,后面的人往前补位,也不会瞬移到前面的人位置上去,而是慢慢的,
                删除li时也想实现这种效果,需要用到两个css样式 【固定写法
                 .v-move{
                     transition:xxxx
                 }以及
                 .v-leave-active{ //因为其实点击删除的元素虽然不在了,但是空间位置得到了保留,定义绝对定位就让这个空间位置消失,后面的元素就过度性的顶上来,这样移除的元素和顶上来的元素都同时有动画效果!!!
                     position:absolute
                 }
                】
            -->

 


posted @ 2021-05-05 16:07  努力不搬砖的iori  阅读(339)  评论(0编辑  收藏  举报