vue中css动画transition

深碍√TFBOYSˉ_ 2022-04-15 02:39 263阅读 0赞

![Transition Diagram][]

动画第一帧：v-enter   v-leave

动画最后一帧： v-enter-to  v-leave-to

动画属性时间等过程：v-enter-active  v-leave-active

如果没有写第一帧或最后一帧，那么默认是动画开始前的值，动画结束后的值

v-leave无效的原因？？？

<style>
    
        .fade-leave-active {
          transition: font-size 5s;
        }
        .fade-leave-to {
          font-size: 50px
        }
        .fade-enter {
          font-size: 40px;
        }
        .fade-enter-active {
          transition: font-size 3s;
        }
        .fade-enter-to {
          font-size: 20px
        }
      
      </style>
    </head>
    
    <body>
      <div id="demo">
        <button @click="show = !show">click me</button>
        <transition name="fade">
          <div v-if="show" class="de">sfsf</div>
        </transition>
      </div>
      <script>
        new Vue({
          el: '#demo',
          data: {
            show: true
          }
        })
      </script>
    </body>

该方法动画结束后，还是会回到代码设置的状态。就是抛开动画效果，代码设置的什么样子，结果就是什么样子。

**特点：用transition name来包裹一个显示/隐藏的标签**

[Transition Diagram]: https://cn.vuejs.org/images/transition.png

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue动画transition

一、动画生命周期在进入/离开的过渡中，会有 6 个 class 切换。 > v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一

旧城等待，/ 2022年10月14日 01:00/ 0 赞/ 185 阅读

相关 CSS 动画：animation和transition

animation animation使用时必须配合@keyframes <!DOCTYPE html> <html> <head>

Myth丶恋晨/ 2022年06月16日 03:56/ 0 赞/ 289 阅读

相关 Vue之transition动画

demo: <template> <div id="root"> <div> <router-link to="/ho

向右看齐/ 2022年04月18日 04:48/ 0 赞/ 238 阅读

相关 vue中css动画transition

![Transition Diagram][] 动画第一帧：v-enter v-leave 动画最后一帧： v-enter-to v-leave-to 动画属性时间

深碍√TFBOYSˉ_/ 2022年04月15日 02:39/ 0 赞/ 264 阅读

相关 Vue过渡动画 transition结合animate.css使用

第一步.引用 animate.css文件第二步.定义动画名字，如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

小鱼儿/ 2022年03月11日 08:16/ 0 赞/ 313 阅读

相关 Vue中使用 transition动画，vue过渡动画

[Vue][]的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利

小鱼儿/ 2022年03月11日 08:08/ 0 赞/ 901 阅读

相关【css3】动画transition

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS B

我不是女神ヾ/ 2022年01月06日 06:25/ 0 赞/ 436 阅读

相关 vue----transition动画

动画原理 1、如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn，name为动画的名称 <transition name=“”

向右看齐/ 2021年12月23日 10:13/ 0 赞/ 376 阅读

相关 vue transition动画

引用： https://www.cnblogs.com/ccyinghua/p/7872694.html https://blog.csdn.net/wxw20147854

灰太狼/ 2021年12月18日 07:05/ 0 赞/ 309 阅读

相关 Vue - Vue中使用 transition 过渡动画、Animate.css 库动画

Vue 中使用过渡动画一. transition 二. Vue 中使用 @keyframes 1. @keyframes 的使用

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 17:15/ 0 赞/ 829 阅读