zoukankan      html  css  js  c++  java
  • 动画效果

    1、案例1

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>动画</title>
        <style>
            /* 进入动画生效时的样式,持续时间1秒 */
            .myname-enter-active {
                animation: bounce-in 1s;
            }
    
            /* 离开动画生效时的样式,持续时间1秒,reverse表示定义的动画的逆向效果*/
            .myname-leave-active {
                animation: bounce-in .5s reverse;
            }
    
            /* 动画效果 */
            @keyframes bounce-in {
    
                /* 
                动画效果:
                正向:时间的百分比,1秒为例,0秒时不显示,0.5秒时放大1.5倍,1秒时显示原大小
                逆向:时间的百分比,1秒为例,0秒时显示原大小,0.5秒时放大1.5倍,1秒时消失
                */
                0% {
                    transform: scale(0);
                }
    
                50% {
                    transform: scale(1.5);
                }
    
                100% {
                    transform: scale(1);
                }
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <button @click="showFlag = !showFlag">按钮</button><br>
            <!--对需要动画的元素用transition标签包裹,并给一个自定义的name属性-->
            <transition name="myname">
                <p v-show="showFlag" style="display: inline-block;">我是动画</p>
            </transition>
        </div>
        <script src="../js/vue.js" type="text/javascript"></script>
        <script>
            const vm = new Vue({
                el: "#app",
                data: {
                    showFlag: true
                },
                methods: {
                }
            });
        </script>
    </body>
    
    </html>
  • 相关阅读:
    JS 知识点补充
    JS 数据之间类型的转化
    JS 数据的类型
    数据结构--数组、单链表和双链表介绍 以及 双向链表
    数据结构--队列
    数据结构--栈
    24. 两两交换链表中的节点
    23. 合并K个排序链表
    22. 括号生成
    21. 合并两个有序链表
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12489791.html
Copyright © 2011-2022 走看看