vue中动画关键帧keyframes 和 animation 和animate动画库

红太狼 2022-04-15 02:45 848阅读 0赞

（1）

<style>
        @keyframes fontScale {
          0% {
            font-size: 30px;
          }
          100% {
            font-size: 50px;
          }
        }
        .fade-leave-active {
          animation: fontScale 3s
        }
        .fade-enter-active {
          animation: fontScale 3s
        }
        
      
      </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 包裹 显示隐藏的标签，样式中：@keyframes定义动画的名字和开始到结束的样式，name-enter-active和name-enter-active使用animation动画，设置时间、reverse等值。

（2）name-enter-active 和name-leave-active 是系统添加的，可以自己设置这两个类的名字

<style>
        .de {
          height: 100px;
          width: 100px;
          background: red;
        }
        @keyframes fontScale {
          0% {
            height: 30px;
          }
          100% {
            height: 50px;
          }
        }
        .leave {
          animation: fontScale 3s
        }
        .enter {
          animation: fontScale 3s reverse;
        }
        
      
      </style>
    </head>
    
    <body>
      <div id="demo">
        <button @click="show = !show">click me</button>
        <transition name="fade" enter-active-class="enter" leave-active-class="leave">
          <div v-if="show" class="de">sfsf</div>
        </transition>
      </div>
      <script>
        new Vue({
          el: '#demo',
          data: {
            show: true
          }
        })
      </script>
    </body>

（3）这样就可以使用animation库

<body>
      <div id="demo">
        <button @click="show = !show">click me</button>
        <transition name="fade" 
                    enter-active-class="animated swing"
                    leave-active-class="animated shake">
          <div v-if="show" class="de">sfsf</div>
        </transition>
      </div>
      <script>
        new Vue({
          el: '#demo',
          data: {
            show: true
          }
        })
      </script>
    </body>

发表评论取消回复

表情：

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

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

相关阅读

相关 animation:动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

怼烎@/ 2023年07月11日 08:48/ 0 赞/ 23 阅读

相关 Vue之动画与animate.css动画库

前言 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使

左手的ㄟ右手/ 2023年06月12日 04:19/ 0 赞/ 188 阅读

相关 animation动画

一、集成方法：分两步： 1、首先使用animation 注册动画，如： .mydiv{ -webkit-animation:mymove 5s inf

柔情只为你懂/ 2023年01月07日 02:30/ 0 赞/ 341 阅读

相关 CSS 动画：animation和transition

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

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

相关 css3——transition动画过渡（transition动画过渡可作用的属性），animation动画铺垫和@keyframes动画关键帧

css3动画优点：开启GPU加速，不会产生动画队列，即频繁点击按钮时，不会有多个动画在等待执行； 1. transition: property duration timin

女爷i/ 2022年05月09日 02:24/ 0 赞/ 432 阅读

相关 vue中动画关键帧keyframes 和 animation 和animate动画库

（1） <style> @keyframes fontScale { 0% { font-size: 3

红太狼/ 2022年04月15日 02:45/ 0 赞/ 849 阅读

相关 vue过渡动画transition、关键帧（keyframes）动画的实现

> 要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，

拼搏现实的明天。/ 2022年04月04日 13:39/ 0 赞/ 927 阅读

相关 Vue简易动画实现和使用animate.css库

简单使用动画方法： ![1693641-20190611115150214-1382869817.png][] 使用keyframes动画帧 ![1693641-2019

我就是我/ 2021年12月21日 09:07/ 0 赞/ 289 阅读

相关 Animations动画和Keyframes关键帧

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2021年10月01日 02:56/ 0 赞/ 451 阅读

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

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

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