vue2.0 动画+ stylus

最新推荐文章于 2021-01-11 19:31:42 发布

dq_095

最新推荐文章于 2021-01-11 19:31:42 发布

阅读量780

点赞数

分类专栏： Vue.js 文章标签： vue2.0动画

本文链接：https://blog.csdn.net/qq_37968920/article/details/81584864

版权

Vue.js 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

一个vue2.0动画+stylus的博客文章地址：https://www.cnblogs.com/jr1993/p/vue.html

以前这样子写的

    <div transition="move" class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
        <span class="inner icon-remove_circle_outline"></span>
    </div>

现在要这样子写:

但是，style写法还是一样的，是父子级关系： .move 与 .cart-decrease 是父子级关系

<div class="cartcontrol">
        <transition name="move">
             <div  class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
                <span class="inner icon-remove_circle_outline"></span>
            </div>
        </transition>
    </div>

stylus写法

减号字体图标动画：

向左平移（opacity：0 >1）
里面的一横旋转180度 (transform rotate0 > 180deg)
回来时相反

<style lang="stylus" rel="stylesheet/stylus">
    .cartcontrol
        font-size 0px
        .cart-decrease  // .move 与 .cart-decrease 是 同级关系 
            display inline-block
            padding 6px
            transition all 0.4s linear 
            &.move-enter-active , &.move-leave
                opacity 1
                transform translate3d(0,0,0)
                .inner
                    transform rotate(0deg)

            .inner
                display inline-block
                line-height 24px
                font-size 24px
                color rgb(0,160,220)
                transition all 0.4s linear

            &.move-enter, &.move-leave-active
                opacity 0
                transform translate3d(24px,0,0)
                .inner
                    transform rotate(180deg)
</style>

另一个动画样式写法：

  <transition name="fade" >
        <div class="list-mask" @click="hideList"  v-show="listShow"></div>
   </transition>

.list-mask
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    z-index 40

    // 动画最终的状态
    background-color rgba(7,17,27,0.6) //这个一定要写上，不能省略，
    -webkit-backdrop-filter blur(10px)
    backdrop-filter blur(10px)
    // 动画开始->最终的状态
    &.fade-enter-active, &.fade-leave   
        transition: all 0.5s  linear
        background-color rgba(7,17,27,0.6)
    // 动画最终的状态->动画结束
    &.fade-enter, &.fade-leave  
        background-color rgba(7,17,27,0)
        transition: all 0.6s  linear