vue基本过渡动画

最新推荐文章于 2023-10-16 11:44:57 发布

虽千万人吾往矣

最新推荐文章于 2023-10-16 11:44:57 发布

阅读量133

点赞数 1

分类专栏： vue 文章标签： vue css css3 animation

本文链接：https://blog.csdn.net/weixin_44575660/article/details/107589338

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

操作css的trasition或animation，vue会给目标元素添加/移除特定的class

基本过渡动画的编码

1). 在目标元素外包裹
2). 定义class样式
1>. 指定过渡样式: transition
2>. 指定隐藏时的样式: opacity/其它

过渡的类名

xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式
在这里插入图片描述
实例1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10_过渡&动画1</title>
  <style>
    /*指定过渡样式*/
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity 1s
    }
    /*指定隐藏时的样式*/
    .xxx-enter, .xxx-leave-to {
      opacity: 0;
    }


    .move-enter-active {
      transition: all 1s
    }

    .move-leave-active {
      transition: all 3s
    }

    .move-enter, .move-leave-to {
      opacity: 0;
      transform: translateX(20px)
    }
  </style>
</head>
<body>

<div id="demo">
  <button @click="show = !show">Toggle</button>
  <transition name="xxx">
    <p v-show="show">hello</p>
  </transition>
</div>

<hr>
<div id="demo2">
  <button @click="show = !show">Toggle2</button>
  <transition name="move">
    <p v-show="show">hello</p>
  </transition>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })

  new Vue({
    el: '#demo2',
    data: {
      show: true
    }
  })

</script>
</body>
</html>

实例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10_过渡&动画2</title>
  <style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
</head>
<body>

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <br>
  <transition name="bounce">
    <p v-if="show" style="display: inline-block">Lorem</p>
  </transition>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#example-2',
    data: {
      show: true
    }
  })
</script>
</body>
</html>

总体感觉都没差，只是vue封装了css

虽千万人吾往矣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基本过渡动画

操作css的trasition或animation，vue会给目标元素添加/移除特定的class基本过渡动画的编码1). 在目标元素外包裹2). 定义class样式1>. 指定过渡样式: transition2>. 指定隐藏时的样式: opacity/其它过渡的类名xxx-enter-active: 指定显示的transitionxxx-leave-active: 指定隐藏的transitionxxx-enter: 指定隐藏时的样式实例1<!DOCTYPE html
复制链接

扫一扫