vue中的动画特效以及animate.css使用

Vue 提供了transition的封装组件，可以给任何元素和组件添加进入/离开过渡a：代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue的动画</title><...

爱上口袋的天空

819人浏览 · 2019-12-14 10:32:57

爱上口袋的天空 · 2019-12-14 10:32:57 发布

Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡
a：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的动画</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
    <!--指定透明度的属性是opacity,属性值从 0.0 到 1.0。值越小，越透明。
        transition：表示过渡动画效果
    -->
    <style>
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>    
<body>
    <div id="root">
        <transition name="fade">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handlerClick">切换</button>
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data() {
                 return {
                    show:true
                 }
             },
             methods: {
                handlerClick:function(){
                    this.show = !this.show;
                }
             },
        });        
    </script>
</body>
</html>

vue中使用Animate.css库
a：下载animate.css库
地址：https://daneden.github.io/animate.css/

b：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的动画</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
    <!--引入animate.css文件-->
    <link rel="stylesheet" type="text/css" href="./animate.css">
</head>    
<body>
    <div id="root">
        <!--引入animate.css的动画效果-->
        <transition enter-active-class="animated swing" 
                    leave-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handlerClick">切换</button>
    </div>
    <script>
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data() {
                 return {
                    show:true
                 }
             },
             methods: {
                handlerClick:function(){
                    this.show = !this.show;
                }
             },
        });        
    </script>
</body>
</html>

选择的动画效果：

NVIDIA AI 技术专区

分享最新的 NVIDIA AI Software 资源以及活动/会议信息，精选收录AI相关技术内容，欢迎大家加入社区并参与讨论。

更多推荐

TensorRT-LLM 1.2最新特性：如何用1行代码实现10倍推理加速？

NVIDIA AI 技术专区

NVIDIA 培训 | AI 培训班新课发布，使用 Isaac 探索机器人仿真的巨大潜能

课程结束后，学员将具备亲手搭建机器人仿真环境的能力，并能将合成数据工作流集成到其中，构建可扩展的仿真优先开发流程。由 NVIDIA 深度学习培训中心（DLI）举办的 NVIDIA AI 培训班推出机器人仿真开发新课程，欢迎热衷于机器人开发的工程师、研究人员、爱好者积极报名，系统掌握仿真环境搭建与开发流程，全面提升实战能力。11 月 27 日：使用 NVIDIA Isaac 加速机器人开发（2025