Vue ＜transition＞过渡动画案例

最新推荐文章于 2023-03-04 21:24:33 发布

zbailing

最新推荐文章于 2023-03-04 21:24:33 发布

阅读量271

点赞数

分类专栏： Vue 文章标签： vue.js 动画 javascript

本文链接：https://blog.csdn.net/zbailing/article/details/122999030

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!-- Vue <transition>过渡动画 -->
<template>
  <div class="page">
    <button @click="show = !show">Toggle show</button>
    <transition name="bounce">
      <!--
      注意：
      css animation动画无法应用在内联元素（display: inline;）上
      -->
      <div class="box" v-if="show">Hello</div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        show: true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
    margin-top: 30px;
    width: 130px;
    height: 200px; line-height: 200px;
    text-align: center;
    background-color: #eee;
  }

  .bounce-enter-active {
    animation: b 1s ease-in reverse;
  }
  .bounce-leave-active {
    animation: b 1s ease-in;
  }
  @keyframes b {
    0% {
      transform-origin: left;
      transform: translateX(0) scaleX(1);
      opacity: 1;
    }
    50% {
      transform-origin: left;
      transform: scaleX(2);
    }
    100% {
      transform-origin: left;
      transform: translateX(300px) scaleX(1);
      opacity: 0;
    }
  }

</style>