vue学习(十七) transition

本是古典何须时尚 2022-04-18 00:38 275阅读 0赞

1，最初的只是隐藏和展示

<table> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;div v-if="show"&gt;hello  world&lt;/div&gt;

&lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:false
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

2，动画隐藏和展示

<table> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            transition:opacity 3s ;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .fade-leave-active{
            transition:opacity 3s ;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;transition name="fade"&gt;
            &lt;div v-if="show"&gt;hello  world&lt;/div&gt;
        &lt;/transition&gt;

&lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:false
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

注：如果transition标签中没有name=“fade”,那么样式都要改成默认以v开头，就是 .fade-enter  改成 .v-enter 其他几项也是一样的操作。

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-transition动画

emo点击显示与消失 <div id="demo"> <button v-on:click="show = !show"> Togg...

港控/mmm°/ 2024年04月17日 05:51/ 0 赞/ 155 阅读

相关学习VUE第十三天课程（VUE之组件（VUE之过渡transition））

VUE之过渡transition Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 clas

小灰灰/ 2023年06月12日 04:20/ 0 赞/ 86 阅读

相关 vue动画transition

一、动画生命周期在进入/离开的过渡中，会有 6 个 class 切换。 > v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一

旧城等待，/ 2022年10月14日 01:00/ 0 赞/ 287 阅读

相关 Vue之transition动画

demo: <template> <div id="root"> <div> <router-link to="/ho

向右看齐/ 2022年04月18日 04:48/ 0 赞/ 343 阅读

相关 vue学习(十七) transition

1，最初的只是隐藏和展示 <table> <tbody> <tr> <td> <pre><!DOCTYPE html> <html lan

本是古典何须时尚/ 2022年04月18日 00:38/ 0 赞/ 276 阅读

相关 Vue学习笔记（十七）——$nextTick()的使用场景

尽管Vue不建议开发者去操作真实dom，但在实际开发中仍然会有部分操作真实dom的场景。初学者在操作真实dom的时候一定会遇到下面这样的问题：页面使用了Vue的某个变量，希

我不是女神ヾ/ 2022年01月06日 00:11/ 0 赞/ 363 阅读

相关 vue----transition动画

动画原理 1、如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn，name为动画的名称 <transition name=“”

向右看齐/ 2021年12月23日 10:13/ 0 赞/ 497 阅读

相关 vue transition动画

引用： https://www.cnblogs.com/ccyinghua/p/7872694.html https://blog.csdn.net/wxw20147854

灰太狼/ 2021年12月18日 07:05/ 0 赞/ 432 阅读

相关学习总结（十七）

1.跨文件夹导入模块 1.如果a文件夹所在目录在环境变量，a文件夹中的ma模块可以被以下方式导入 import a.ma | from a import ma 2.

分手后的思念是犯贱/ 2021年12月12日 12:53/ 0 赞/ 355 阅读

相关 vue学习（8）-过渡transition&动画animate

进入之前离开之后 v-enter\---v-enter-to

超、凢脫俗/ 2021年11月02日 02:06/ 0 赞/ 547 阅读