前言

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

工具/资料

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

开始

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

        
     
        
          
     
    复制代码

2. 定义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)复制代码

• 这样我们就实现了即滚动也偏移

后记

• 看了有没有发现很简单哈，其实本来也就是很简单嘛，只是一开始傻乎乎的用了in使得效果没粗来以为不可以这样用
• 这是本人的学习问题记录的笔记，有需要的可以借鉴
• 欢迎添加微信交流学习
• ：https://yhf7.github.io/
• 如果有什么侵权的话，请及时添加小编微信以及qq也可以来告诉小编（905477376微信qq通用），谢谢！