Vue动画多个元素嵌套使用过渡

最新推荐文章于 2023-02-16 16:09:25 发布

weixin_33946020

最新推荐文章于 2023-02-16 16:09:25 发布

阅读量502

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c85c37f6fb9a04a0956dcfe

版权

前言

在我们前端的工作中我们的去写页面，总会觉得这样的效果给到用户好像很干没有什么体验
那我们就想搞搞新意思？
弄点动画上去憋，那么弄动画我又想他滚动又想他偏移又想有渐变效果
渐变和移动可以写在一起，但是滚动和偏移好像不可以一起执行喔
那我们就要分开两步来执行但是，vue的transition里面好像不可以同时执行两个transform
所以我们就来解决这个问题
其实嘛是可以嵌套使用的哦

工具/资料

mac os 10.13.3
vue官方文档 https://cn.vuejs.org/v2/guide/transitions.html
vs code

开始

套用我们的 transition
- 在我们需要定义效果的外面包上 transition
- 这个 name 呢是自定义的也可以不写，个人认为最好是写一下

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

定义Css
- 如果使用name了，-前面写的就是name定义的名称，如果没有写那就直接用v就好
- 在我们要嵌套动画的地方也是向平时css关系那些嵌套进去就好了

/* 这里我们定义了滑动和渐变 */
.move-enter-active, .move-leave-active
    transition: all .4s linear
    opacity: 1
    transform translate3d(0,0,0)
.move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */
    opacity: 0
    transform translate3d(24px,0,0)

/* 
    定义滚动
    这里我是动画下的，span想添加效果
    那么我们就把类名拼接在后面去使用就好了
    如果添加了不生效，那就换一个类名，因为有一些是官方的类名是不允许使用的
 */
.move-enter-active .inner, .move-leave-active .inner
    transition: all .4s linear
    transform rotate(0)
.move-enter .inner, .move-leave-to .inner
    transform rotate(180deg)
复制代码