<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .hehe-enter,.hehe-leave-to{
            opacity: 0;
        }
        .hehe-enter-to,.hehe-leave{
            opacity: 1;
        }
        .hehe-enter-active,.hehe-leave-active{
            transition: all 3s;
        }
    </style>
</head>
<body>
<div id="demo">
    <button v-on:click="Show">点击动画</button>
    <transition-group name="hehe">
        <h1 v-if="show" :key="1">hello</h1>
        <h2 v-if="show" :key="2">hello world!</h2>
    </transition-group>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            show:true
        },
        methods:{
           Show(){
               this.show=!this.show;
           }
        }
    });
    //需要动画元素放在transition标签内部，在样式里添加类名属性
    //多个元素使用transition-group
</script>
</body>
</html>

结果截图：

Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue