39 制作一个显示隐藏的切换动画效果

制作一个显示隐藏的切换效果

    
    
    Demo03
    



    


    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow= !this.isShow
            }
        },
        template: `
            
willem
            
切换动画
        `
    })
    const vm = app.mount("#app")

上面的代码中我们先写了一个按钮，然后按钮绑定 hanldClick 方法，要控制DOM元素的显示和隐藏，这里我使用了 v-if 。

还需要一个数据项，我定义为了isShow，用来控制元素的显示和隐藏。

这步编写完成可以到浏览器中查看一下效果。 主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制，说明代码没有错误。就可以继续向下学习了。

编写CSS样式和制作进入动画

我们编写动画，同样需要编写CSS样式，并且这些CSS样式有固定的名称，你需要符合这些名称规则来进行编写。

先来写一个关键帧动画, 这个关键帧动画作了从左侧位移到屏幕中的效果，

    @keyframes comein{
        0%{
            transform:translateX(-100px)
        }
        100%{
            transform:translateX(50px)
        }
    }

然后需要写一个固定的CSS样式写法 v-enter-active 意思是进入是采用何种动画方式，我们直接用 animation 调用这个动画就可以了。

.v-enter-active{
    animation: comein 1s;
}

现在还是没有动画效果的，你还需要给动画的DOM元素加上标签。

template: `
    
        码云笔记前端博客
    
    切换动画
`

    
    
    Demo03
    



    


    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow= !this.isShow
            }
        },
        template: `
            
                
willem
            
            
切换动画
        `
    })
    const vm = app.mount("#app")


    .v-enter-active{
        animation: comein 1s;
    }
    @keyframes comein{
        0%{
            transform:translateX(-100px)
        }
        100%{
            transform:translateX(50px)
        }
    }

编写退出动画

现在已经有了元素进入动画，但是退出时还没有退出动画，所以，我们需要制作一个退出动画。过程和上面的方法类似。

先编写CSS样式。

@keyframes comeout{
    0%{
        transform:translateX(50px)
    }
    100%{
        transform:translateX(-100px)
    }
}

有了 comeout 的关键帧CSS，然后又是一个固定写法 v-leave-active。

.v-leave-active{
    animation : comeout 1s;
}

这时候你再点击按钮，就有了退出动画。

    
    
    Demo03
    



    


    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow= !this.isShow
            }
        },
        template: `
            
                
willem
            
            
切换动画
        `
    })
    const vm = app.mount("#app")


.v-leave-active{
    animation : comeout 1s;
}
@keyframes comeout{
    0%{
        transform:translateX(50px)
    }
    100%{
        transform:translateX(300px)
    }
}

总结

以上就是本文的主要内容，我们学习了Vue3中的单个元素进入动画效果的制作，但是看起来还动画效果比较硬，没关系，下节我们再学习一下单个元素过渡效果的制作。