Vue: built-in animation class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
    }

    /* 入场animation */
    .v-enter-from {
      opacity: 0;
    }

    .v-enter-active {
      transition: all 1s ease-in-out;
    }

    .v-enter-to {
      opacity: 1;
    }

    /* 离场animation */
    .v-leave-from {
      opacity: 1;
    }

    .v-leave-active {
      transition: all 1s ease;
    }

    .v-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <main id="vale">

  </main>

  <template id="t1">
    <aside>
      <transition>
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <button @click="flag=!flag">btn</button>
    </aside>
  </template>
  <script>
    let vail = Vue.createApp({
      data () {
        return {
          msg: 'rtyu',
          flag: false
        }
      },
      template: '#t1'
    }).mount('#vale')
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
    }

    @keyframes shake-from {
      0% {
        opacity: 0;
        transform: translateX(0);
      }

      50% {
        opacity: 0.5;
        transform: translateX(50px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes shake-to {
      0% {
        opacity: 1;
        transform: translateX(0)
      }

      50% {
        opacity: 0.5;
        transform: translateX(50px)
      }

      100% {
        opacity: 0;
        transform: translateX(0)
      }
    }

    .valor-enter-active {
      animation-name: shake-from;
      animation-duration: 1s;
    }

    .valor-leave-active {
      animation-name: shake-to;
      animation-duration: 1s;
    }
  </style>
</head>

<body>
  <main id="vale">

  </main>

  <template id="t1">
    <aside>
      <transition name="valor">
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <transition>
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <transition>
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <button @click="flag=!flag">btn</button>
    </aside>
  </template>
  <script>
    let vail = Vue.createApp({
      data () {
        return {
          msg: 'rtyu',
          flag: false
        }
      },
      template: '#t1',
    }).mount('#vale')
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
    }

    @keyframes shake-from {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(100px, 100px, 100px);
      }

      100% {
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes shake-to {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(100px, 100px, 100px);
      }

      100% {
        transform: translate3d(0, 0, 0);
      }
    }

    .v-enter-from {
      opacity: 0;
    }

    .v-enter-active {
      opacity: 0.5;
      animation-name: shake-from;
      animation-duration: 1s;
      transition: all 5s ease;
    }

    .v-enter-to {
      opacity: 1;
    }

    .v-leave-from {
      opacity: 1;
    }

    .v-leave-active {
      opacity: 0.5;
      animation-name: shake-to;
      animation-duration: 1s;
      transition: all 5s ease;
    }

    .v-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <main id="vale"></main>
  <template id="t1">
    <aside>
      <transition type="transition" :duration="1000">
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <button @click="flag=!flag">btn</button>
    </aside>
  </template>
  <script>
    let vail = Vue.createApp({
      data () {
        return { msg: 'rty', flag: false }
      },
      template: '#t1'
    }).mount('#vale')
  </script>
</body>

</html>

结合三方动画库 animate.css

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
    }

  
  </style>
</head>

<body>
  <main id="vale"></main>
  <template id="t1">
    <aside>
      <!-- <transition enter-from-class="e1" enter-active-class="e2" enter-to-class="e3" leave-from-class="l1" leave-active-class="l2" leave-to-class="l3"> -->
      <transition enter-active-class="animate__animated animate__flash"
                  leave-active-class="animate__animated animate__bounce"
                  :duration="{enter:5000,leave:1000}"
      >
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <button @click="flag=!flag">btn</button>
    </aside>
  </template>
</body>
<script>
  let vail = Vue.createApp({
    data () {
      return { msg: 'rtyu', flag: false }
    },
    template: '#t1'
  }).mount('#vale')
</script>

</html>

js hook

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
    }
  </style>
</head>

<body>
  <main id="vale"></main>
  <template id="t1">
    <aside>
      <!-- <transition enter-from-class="e1" enter-active-class="e2" enter-to-class="e3" leave-from-class="l1" leave-active-class="l2" leave-to-class="l3"> -->
      <transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <pre class="box" v-show="flag">{{msg}}</pre>
      </transition>
      <button @click="flag=!flag">btn</button>
    </aside>
  </template>
</body>
<script>
  let vail = Vue.createApp({
    data () {
      return { msg: 'rtyu', flag: false }
    },
    methods: {
      beforeEnter (elem) {
        console.count(elem)
        elem.style.borderRadius = '0%'
      },
      enter (elem, done) {
        console.error(elem)
        elem.style.borderRadius = '50%'
        const intervalId = setInterval(() => {
          const radius = elem.style.borderRadius
          if (radius === '0%') {
            elem.style.borderRadius = '50%'
          } else {
            elem.style.borderRadius = '0%'
          }
        }, 2000)

        setTimeout(() => {
          clearInterval(intervalId)
          done()
        }, 5000)
      },
      afterEnter (elem) {
        console.dir(elem)
        elem.style.backgroundColor='aqua'
        elem.style.borderRadius = '0%'
      }
    },
    template: '#t1'
  }).mount('#vale')
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <style>
    body {
      font-size: 40px;
      text-align: center;
    }

    .v-enter-from {
      opacity: 0;
    }

    .v-enter-active {
      opacity: 0.5;
      transition: all 2s ease-in-out;
    }

    .v-enter-to {
      opacity: 1;
    }

    .v-leave-from {
      opacity: 1;
    }

    .v-leave-active {
      opacity: 0.5;
      transition: all 2s ease-in-out;
    }

    .v-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <main id="vale"></main>
  <template id="t1">
    <aside>
      <transition mode="out-in" appear>
        <del v-if="flag">del</del>
        <pre v-else>pre</pre>
      </transition>
      <hr>
      <button @click="handleClick">btn</button>
    </aside>
  </template>
  <script>
    let vail = Vue.createApp({
      data () {
        return { flag: true }
      },
      template: '#t1',
      methods: {
        handleClick () {
          this.flag = !this.flag
        }
      }
    }).mount('#vale')
  </script>
</body>

</html>

多组件animate

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <style>
    body {
      font-size: 40px;
      text-align: center;
    }

    .v-enter-from {
      opacity: 0;
    }

    .v-enter-active {
      opacity: 0.5;
      transition: all 2s ease-in-out;
    }

    .v-enter-to {
      opacity: 1;
    }

    .v-leave-from {
      opacity: 1;
    }

    .v-leave-active {
      opacity: 0.5;
      transition: all 2s ease-in-out;
    }

    .v-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <main id="vale"></main>
  <template id="t1">
    <main>
      <transition mode="out-in" appear>
        <component :is="component"></component>
      </transition>
      <hr>
      <button @click="handleClick">btn</button>
      <component v-bind:is="'c2'"></component>
    </main>
  </template>
  <script>
    let c1 = {
      template: `<ins>ins</ins>`
    }
    let c2 = {
      template: `<kbd>kbd</kbd>`
    }

    let vail = Vue.createApp({
      data () {
        return { component: 'c1' }
      },
      components: {
        c1, c2
      },
      template: '#t1',
      methods: {
        handleClick () {
          this.component === 'c1' ? this.component = 'c2' : this.component = 'c1'
        }
      }
    }).mount('#vale')
  </script>
</body>

</html>

transition-group

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
  <style>
    .list-item {
      display: inline-block;
      width: 70px;
      height: 50px;
    }

    .v-enter-from {
      opacity: 0;
      transform: translateY(30px);
    }

    .v-enter-active {
      transition: all 1s ease-in-out;
    }

    .v-enter-to {
      opacity: 1;
      transform: translateY(0);
    }

    .v-leave-from {
      opacity: 1;
      transform: translateY(0)
    }

    .v-leave-active {
      transition: all 1s ease-in-out;
    }

    .v-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
  </style>
</head>

<body>
  <div id="vale"></div>
  <template id="t1">
    <aside>
      <transition-group>
        <nav class="list-item" v-for="(item,i) in list" v-bind:key="i">{{item}}</nav>
      </transition-group>
      <hr>
      <button @click="add">add</button>
      <button @click="del">del</button>
    </aside>
  </template>
  <script>
    let vail = Vue.createApp({
      data () {
        return { list: ['vagary-1', 'vagary-2'] }
      },
      template: '#t1',
      methods: {
        add () {
          this.list.push(`vagary-${this.list.length + 1}`)
        },
        del () {
          this.list.pop()
        }
      }
    }).mount('#vale')
  </script>
</body>

</html>

posted @ 2022-03-15 13:34 ascertain 阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue: transition animation

· Vue: teleport

· Vue过渡配合animate.css库使用

· vue3中使用animate.css+wow.js

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称： ascertain
园龄： 4年10个月
粉丝： 7
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

ascertain

Vue: built-in animation class

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论