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

使用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:'
hello world
'
}); 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:'
helloworld
'
}); const vm= app.mount('#root'); </script> </html>

你可能感兴趣的:(vue,css,vue.js,javascript)