发表于： 2019-12-26 23:13:28

1 1297

今天完成的事情

今天完成的主要任务是学习了vue中动画的部分和cli的创建和分析了其中的几个组件关联的方式。在动画的学习过程中，有使用到渐隐渐显的效果。需要使用的标签是transition这个标签，通过在样式中定义几个类动作状态可以生成这样的效果。

.v-enter,
        .v-leave-to {
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active  {
            transition: opacity 1s;
        }

第二块学的是可以使用在animate.css这个样式库中调用我们的需要的动画效果，通过进入状态的类和离开状态的类来描述这个animate是什么样式的

<transition 

      name="fade" 
      enter-active-class="animated swing"
      leave-active-class="animated shake"
    >

第三块是同时使用动画与过渡两种形式的动画，此时我们使用了animate这个库后可以在这两个属性中加入我们需要的过渡动画的类

enter-active-class="animated swing fade-enter-active"
      leave-active-class="animated shake fade-leave-active"

在头部的样式中可以使用之前写过度的写法

.fade-enter, .fade-leave-to {
      opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 1s;
    }

同时这两个动画中因为表现的时间不同，可以使用type=""确定使用哪个时长，或是通过

:duration="{enter: 2000, leave: 2000}"

确定其中的进入和离开的总时长。

明天完成的事情

明天试着写任务中的页面并继续复习用到的内容知识

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1