vue class绑定和过渡

最新推荐文章于 2023-03-16 23:21:54 发布
最新推荐文章于 2023-03-16 23:21:54 发布
阅读量243 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44752891/article/details/90111107
版权

html部分

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example-2">
    <button @click="show = !show">Toggle show</button>
    <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../js/css-animation.js"></script>
<link href="../css/css-animation.css" rel="stylesheet">
</body>
</html>

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example-1">
    <button @click="show = !show">
        Toggle render
    </button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../js/css-transition.js"></script>
<link href="../css/css-transition" rel="stylesheet">
</body>
</html>

3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px',background:'red' }">内联样式</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../js/style-one.js"></script>
</html>

4.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-bind:style="[baseStyles, overridingStyles]">多样式绑定</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../js/style-three.js"></script>
</html>

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-bind:style="styleObject">绑定样式对象</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../js/style-two.js"></script>
</html>

6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../js/transition.js"></script>
<link href="../css/transition.css" rel="stylesheet">
</body>
</html>

CSS部分

1.

.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
 

2.

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}
 

3.

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
 

js部分

1.

new Vue({
    el: '#example-2',
    data: {
        show: true
    }
})
 

2.

new Vue({
    el: '#example-1',
    data: {
        show: true
    }
})
 

3.

new Vue({
    el: '#app',
    data: {
        activeColor: 'green',
        fontSize: 30
    }
})

4.

new Vue({
    el: '#app',
    data: {
        baseStyles: {
            color: 'green',
            fontSize: '30px',
            background:'red'
        },
        overridingStyles: {
            'font-weight': 'bold'
        }
    }
})

5.

new Vue({
    el: '#app',
    data: {
        styleObject: {
            color: 'green',
            fontSize: '30px',
            background:'red'
        }
    }
})

6.

new Vue({
    el: '#demo',
    data: {
        show: true
    }
})

XTFELY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue笔记(五) 表单输入绑定 过渡&动画
huangpf_vcx
02-29 172
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div&...
使用过渡类名实现动画
youguang_的博客
03-08 531
（1）使用过渡名实现动画（手写及自定义） &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;style&gt; .v-enter, .v-leav...
2.vue模板语法
dream_back的博客
01-12 453
1.Html，使用 v-html 指令用于输出 html 代码 <div id="app"> <div v-html="message"></div> //直接获取message的值，类似于{{message}} </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </scrip
【Vue 学习】Vue2 的动画与过渡
最新发布
不谷的博客
03-16 1111
Vue2 的动画与过渡
Vue.js 过渡 & 动画
随风而逝的博客
07-30 341
Vue.js 过渡 & 动画 本章节我们主要讨论 Vue.js 的过渡效果与动画效果。 过渡 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。 语法格式 <transition name = "nameoftransition"> <div><...
Vue.js基础学习之class与样式绑定
10-20
1. v-bind:class绑定方法 在Vue.js中，可以使用v-bind指令（简写为:）动态地绑定class属性。v-bind:class指令可以接受一个对象，对象的属性名是class的名字，而属性值是一个布尔值，表示当该值为true时，相应的class...
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
08-27
在Vue2.0中，为Tab标签页和页面切换添加过渡效果可以提升用户界面的交互体验，让页面的切换更加平滑和优雅。...在实际开发中，还可以结合Vue的动态绑定和条件渲染等特性，实现更复杂的过渡效果和交互逻辑。
vue3.0 CLI – 2.3 – 组件 home.vue 中学习指令和绑定
12-10
在Vue 3.0 CLI项目中，我们常常需要在组件中使用指令和绑定来实现页面交互和数据控制。本文以组件`home.vue`为例，深入探讨这部分内容。 首先，我们看到`data`对象中的`navs`属性被改造，它是一个数组，其中每个...
前端框架Vue期末复习资料
11-13
前端框架 Vue 期末复习资料 Vue 是一个前端框架，提供了许多强大且灵活的功能，以下是 Vue 的一些...这些知识点只是 Vue 框架的一部分，但是它们是非常重要的概念，掌握这些概念可以帮助您更好地理解和使用 Vue 框架。
使用Vue和jQuery实现轮播图
05-22
Vue.js提供了组件化和响应式数据绑定，而jQuery则用于实现平滑的动画效果。这种结合可以让你在享受Vue的便利性的同时，充分利用jQuery的强大功能。记得根据实际需求调整组件的配置，如添加控制按钮、指示器或其他...
Vue的过渡&动画
weixin_44083366的博客
09-02 229
Vue的过渡&动画 文章目录Vue的过渡&动画过渡transition过渡的HTML和CSS代码自定义过渡类名（写在html里）显性的过渡持续时间JavaScript钩子初始渲染的过渡多个元素的过渡动画animation 过渡transition 过渡的HTML和CSS代码 <transition name = "fade"> <div></d...
vue 钩子函数实现小球半场动画 transition 必须要加一个 name 属性 不然enter钩子函数会导致动画会消失
qq_42039912的博客
07-14 381
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/vue.js"></scr.
Vue笔记：动画效果
m0_47883103的博客
08-31 489
动画效果 利用 v-bind 给元素添加不同的类名，这些类名是提前写好的动画，以此来达到动画效果 利用transition标签包裹住需要产生动画效果的标签 transition中的子元素需要有v-show或者v-if来控制是否显示 transition标签里的name属性决定使用那一个动画效果 例子 先定义动画效果 .fade-enter-active { transition: all ease 2s; } .fade-enter { opacity: 0; }
教你用Vue如何实现过渡&动画效果
EX1332914934的博客
05-10 6960
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单例子 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="
vue 过渡的四种方式
qq_38362831的博客
05-28 2610
过渡 1.vue中实现过渡或是动画一共提供了这样四种形式： 在 CSS 过渡和动画中自动应用 class — 自己写css3动画 可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用 在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画 可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人...
18.Vue过渡&动画：transition
高新园养鸡场
09-08 984
简介 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡： 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点   过渡类名 在进入的过渡中，会有 3 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以
Vue 过渡效果
Jay的博客
01-14 833
前言 为了让vue 页面效果展示时高端点、友好点，我们可以适当的加入一些过渡效果。 使用规则 在vue 中，如果要让某个组件（元素）添加过渡效果，就必须让该组件（元素）包裹在<transition></transition> 元素中。该元素有个name 属性，用于标识作用。此外，我们还要去设置过渡效果css。这部分将着重讲： Vue 为过渡效果设置了一系列的class: ...
vue组件切换时使用过渡(transition)时应该注意的一些事项
热门推荐
Encorehwang的博客
01-04 2万+
最近在做公司项目时，涉及到做一个问卷调查，需要在不同题目题目之间使用transition产生一个过渡效果：当点击按钮进入下一题时，当前卡片从正中间向左滑动至不可见后，下一题对应的卡片从右边不可见区域从右向左滑动至屏幕正中间，在这个过程中我发现了几个问题，下面是该部分对应的代码<transition :name="slide"> <keep-alive> <component
vue过渡动画之——过渡类名
王小森的成长博客
07-15 1300
过渡类名的使用 <transition name="fade"> <div class="el"></div> </transiton> v-enter：进入时，开始动的状态（开始变化的一个状态，当变化开始时移除）。 v-enter-active：变化的一个过程（从变化开始到变化结束）。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 ...
Vue.js实战：数据绑定与指令详解
本书涵盖了Vue.js的基础特性，如数据绑定、事件处理、模板和指令，同时也涉及Vue.js的高级特性，如组件、过滤器、过渡效果，以及状态管理工具Vuex。书中还对比了Vue.js 1.0和2.0的区别，并介绍了新特性如render函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值