Vue基于 class 的动画和过渡

 

https://v3.cn.vuejs.org/guide/transitions-overview.html

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- v3.0 -->
        <script src="js/vue.min.js"></script>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    </head>
    <style>
        body{
            margin: 30px;
        }
        button{
            background-color: #d93419;
            border-radius: 4px;
            display: inline-block;
            border: none;
            padding:0.75rem 1rem;
            margin: 20px 10px 0 0;
            text-decoration: none;
            color: #FFFFFF;
            font-family: sans-serif;
            font-size: 1rem;
            cursor: pointer;
            text-align: center;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        button:focus{
            outline: 1px dashed #fff;
            outline-offset: -3px;
        }
        .shake{
            animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
            transform: translate3d(0,0,0);
            backface-visibility: hidden;
            perspective: 1000px;
        }
        @keyframes shake{
            10%,90%{
                transform: translate3d(-1px,0,0);
            }
            20%,80%{
                transform: translate3d(2px,0,0);
            }
            30%,50%,70%{
                transform: translate3d(-4px,0,0);
            }
            40%,60%{
                transform: translate3d(4px,0,0);
            }
        }
    </style>
    <body>
        
        <div id="demo">
            Push this button to do something you shouldn be doing <br>
            
            <div :class="{shake:noActivated}">
                <button @click="noActivated=true">Click me</button>
                <span v-if="noActivated">Oh no!</span>
            </div>
            
        </div>
        
        
        <script type="text/javascript">
            const Demo = {
                data(){
                    return {
                        noActivated:false
                    }
                }
            }
            Vue.createApp(Demo).mount('#demo')
        </script>
    </body>
</html>

 

 

 

过渡与 Style 绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- v3.0 -->
        <script src="js/vue.min.js"></script>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    </head>
    <style>
        #demo{
            width: 100vw;
            height: 100vh;
        }
        .movearea{
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            padding: 6vmin;
            transition: 0.2s background-color ease;
        }
    </style>
    <body>
        
        <div id="demo">
            <div @mousemove="xCoordinate" :style="{backgroundColor:`hsl(${x},80%,50%)`}" class="movearea">
                <h3>Move your mouse across the screen...</h3>
                <p>x:{{x}}</p>
            </div>
        </div>
        
        <script type="text/javascript">
            const Demo = {
                data(){
                    return {
                        x:0
                    }
                },
                methods:{
                    xCoordinate(e){
                        this.x=e.clientX;
                    }
                }
            }
            
            Vue.createApp(Demo).mount('#demo');
        </script>
    </body>
</html>

 

 

 

 

缓动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- v3.0 -->
        <script src="js/vue.min.js"></script>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    </head>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px;
        }
        .button{
            background: #1b8f5a;
            transition: background 0.25s ease-in;
            border-radius: 4px;
            display: inline-block;
            border: none;
            padding: 0.75rem 1rem;
            margin: 0;
            text-decoration: none;
            color: #ffffff;
            font-family: sans-serif;
            font-size: 1rem;
            cursor: pointer;
            text-align: center;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        
        button:hover,
        button:focus{
            transition: background 0.3s ease-out;
            background: #3eaf7c;
        }
        
        button:focus{
            outline: 1px solid #fff;
            outline-offset: -4px;
        }
    </style>
    <body>
        
        <div id="app">
            <button type="button" class="button">
                {{message}}
            </button>
        </div>
        
        <script type="text/javascript">
            const ButtonApp = {
                data(){
                    return{
                        message:'Hover Me!'
                    }
                }
            }
            
            Vue.createApp(ButtonApp).mount('#app')
        </script>
    </body>
</html>

 

posted @ 2021-12-18 16:38  漫漫长路</>  阅读(164)  评论(0)    收藏  举报