首页技术文章正文

Web前端培训：appear初始渲染动画的方式

更新时间:2022年09月21日15时59分来源:大阳城app官网入口浏览次数:

好口碑IT培训

　　在前面的案例中，动画效果都是在事件处理方法中控制的，在元素初始渲染时(页面刚打开时)并没有动画效果。如果希望给元素添加初始渲染的动画效果，可以通过给transition组件设置appear属性来实现。示例代码如下：

　　在上述代码中，appear表示开启此特性，appear-class表示初始class样式，appear-to-class表示过渡完成的class样式，appear-active-class会应用在整个过渡过程中。

　　为了使读者更好地理解，下面我们通过例4-3进行演示。

　　【例4-3】

　　(1)创建：C：\vue\chapter04\demo03.html文件，具体代码如下：



    
    
     过渡文字效果

　　在上述代码中，第4行在标签中定义了appear和appear-active-class属性。

　　(2)在浏览器中打开demo03.html文件，查看元素初次渲染的过渡动画效果。

　　小提示：

　　关于appear-class、appear-to-class、appear-active-class三者的排序问题，分为以下4种情况。

　　(1)如果appear-active-class排在最后一个，只有appear-active-class属性起作用。

　　(2)如果appear-active-class排在第一个，它本身不起作用。此时由appear-class过渡到appear-to-class属性。

　　(3)如果appear-class排在第一个，它本身不起作用。由appear-active-class过渡到appear-to-class属性。

　　(4)如果appear-to-class排在第一个，它本身不起作用，由appear-class过渡到appear-active-class属性。

最新资讯