前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >【Vue3 从入门到实战 进阶式掌握完整知识体系】019-Vue中的动画:使用 Vue 实现基础的 CSS 过渡与动画效果

【Vue3 从入门到实战 进阶式掌握完整知识体系】019-Vue中的动画:使用 Vue 实现基础的 CSS 过渡与动画效果

作者头像
訾博ZiBo
发布2025-01-06 14:14:29
发布2025-01-06 14:14:29
950
举报
文章被收录于专栏:全栈开发工程师

四、Vue中的动画

1、使用 Vue 实现基础的 CSS 过渡与动画效果

过渡:比如说一个 div 的背景颜色从红色逐渐变成绿色,这叫过渡; 动画:比如说一个 div 从左到右的移动,这叫动画;

动画
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    @keyframes leftToRight {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      100% {
        transform: translateX(0px);
      }
    }
    .animation{
      animation: leftToRight 3s;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        animate: {
          animation: false
        }
      }
    },
    methods:{
      open(){
        this.animate.animation = !this.animate.animation;
      }
    },
    template: `
        <div>
          <div :class="animate">hello world!</div>
          <button @click="open">开启动画</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210613194405623.png
image-20210613194405623.png
过渡
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    .transition{
      transition: 3s background-color ease;
    }
    .blue{
      background: blue;
    }
    .red{
      background: red;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        animate: {
          transition: true,
          blue: true,
          red: false
        }
      }
    },
    methods:{
      shift(){
        this.animate.red = !this.animate.red;
      }
    },
    template: `
        <div>
          <div :class="animate">hello world!</div>
          <button @click="shift">切换</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210613195025983.png
image-20210613195025983.png
通过绑定样式的方式实现过渡
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    .transition{
      transition: 3s background-color ease;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        styleObject: {
          background: 'red'
        }
      }
    },
    methods:{
      shift(){
        if(this.styleObject.background === 'red'){
          this.styleObject.background = 'blue';
        }else{
          this.styleObject.background = 'red';
        }
      }
    },
    template: `
        <div>
          <div class="transition" :style="styleObject">hello world!</div>
          <button @click="shift">切换</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210613205307175.png
image-20210613205307175.png
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-06-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 四、Vue中的动画
    • 1、使用 Vue 实现基础的 CSS 过渡与动画效果
      • 动画
      • 运行结果
      • 过渡
      • 运行结果
      • 通过绑定样式的方式实现过渡
      • 运行结果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档