VUE：过渡&动画

VUE：过渡&动画

vue动画的理解

1）操作css的 trasition 或 animation

2）vue会给目标元素添加/移除特定的class

3）过渡的相关类名

　　xxx-enter-active：指定显示的transition

　　xxx-leave-active：指定隐藏的transition

　　xxx-enter/xxx-leave-to：指定隐藏时的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>10_过渡&动画</title>
        <style>
            /* 显示或隐藏的过滤效果 */
            .xxx-enter-active,.xxx-leave-active{
                transition: opacity 1s;
            }
            /* 隐藏时的样式 */
            .xxx-enter,.xxx-leave-to{
                opacity: 0;
            }
            
            /* 显示的过滤效果 */
            .move-enter-active{
                transition: all 1s;
            }
            /* 隐藏的过滤效果 */
            .move-leave-active{
                transition: all 3s;
            }
            /* 隐藏时的样式 */
            .move-enter,.move-leave-to{
                opacity: 0;
                transform: translateX(20px);
            }
        </style>
    </head>
    <body>
        <!--
            1.vue动画的理解
                操作css的trasition或animation
                vueh会给目标元素添加/移除特定的class
            2.基本过渡动画的编码
                1）在目标元素外包裹<transition name="xxx"></transition>
                2）定义class样式
                    1>.指定过渡样式:transition
                    2>.指定隐藏时的样式:opacity/其他
                3）过渡的类名
                    xxx-enter-active：指定显示的transition
                    xxx-leave-active：指定隐藏的transition
                    xxx-enter：指定隐藏时的样式
        -->
        <div id="test1">
            <button @click="isShow=!isShow">toggle</button>
            <transition name='xxx'>
                <p v-show="isShow">hello</p>
            </transition>
        </div>
        
        <div id="test2">
            <button @click="isShow=!isShow">toggle</button>
            <transition name='move'>
                <p v-show="isShow">hello</p>
            </transition>
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            new Vue({
                el:'#test1',
                data(){
                    return {
                        isShow:true
                    }
                }
            })
            
            new Vue({
                el:'#test2',
                data(){
                    return {
                        isShow:true
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2018-11-14 23:26  涛先森の日常  阅读(207)  评论(0)  编辑  收藏  举报