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

最新推荐文章于 2024-06-04 11:05:04 发布

cw11lq

最新推荐文章于 2024-06-04 11:05:04 发布

阅读量335

点赞数

分类专栏： vue 文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/shmilylqd/article/details/127388276

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用Vue实现基础的css动画效果，实现了hello world左右移动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>hello</title>
        <script src="https://unpkg.com/vue@next"></script>
       <style>
        @keyframes leftTORight {
            0%{
                transform: translateX(-100px);
            }
            50%{
                transform: translateX(-50px);
            }
            0%{
                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:{
        handleclick(){
            this.animate.animation=!this.animate.animation;
        }
    },
    template:'<div><div :class="animate">hello world</div><button @click="handleclick">切换</button></div>'
   });  

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

使用Vue实现基础的css动画效果，实现颜色的渐变切换。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>hello</title>
        <script src="https://unpkg.com/vue@next"></script>
       <style>
        .transition{
            transition: 3s background-color ease;

        }
        .blue{
            background:blue;
        }
        .green{
            background: green;
        }
       </style>
    </head>
   <body>
    <div id="root"></div>
   </body>
   <script>
   const app=Vue.createApp({
    data(){
        return{
            animate:{
                transition:false,
                blue:true,
                green:false

            }
        }
    },
    methods:{
        handleclick(){
            this.animate.bule=!this.animate.blue;
            this.animate.green=!this.animate.green;
        }
    },
    template:'<div><div :class="animate">helloworld</div><button @click="handleclick">切换</button></div>'
   });  

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