vue-transition多组件过渡-购物页面切换

最新推荐文章于 2023-06-20 20:48:36 发布
最新推荐文章于 2023-06-20 20:48:36 发布
阅读量131 收藏
点赞数
分类专栏： 笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46606159/article/details/105032893
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow-y: hidden;
        }
        footer ul {
            display: flex;
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 40px;
        }
        footer ul li {
            flex: 1;
            text-align: center;
            list-style: none;
            height: 40px;
            line-height: 40px;
            background: gray;
        }

        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }
            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <keep-alive>
            <transition name="bounce" mode="out-in">
                <component :is="who"></component>
            </transition>
        </keep-alive>
        <footer>
            <ul>
                <li><a @click="who='home'">首页</a></li>
                <li><a @click="who='list'">列表页</a></li>
                <li><a @click="who='shopcar'">购物车页面</a></li>
            </ul>
        </footer>
    </div>

    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#box",
            data: {
                who: 'home'
            },
            components: {
                "home": {
                    template: `<div>home<input type="text"/></div>`
                },
                "list": {
                    template: `<div>list</div>`
                },
                "shopcar": {
                    template: `<div>shopcar</div>`
                }
            }
        })
    </script>
</body>
</html>
@Tiramisu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中使用 transition动画，vue过渡动画
xm1037782843的博客
03-07 5432
Vue的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果 下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利用transition标签 案例;点击按钮 实现内容切换---动画显示是淡隐淡出的效果 &lt;style&gt; .fade-enter, .fade-leave-to { opacity: 0 } .fade-ente...
vue-router之实现导航切换过渡动画效果
01-19
过渡动效 提供了transition的封装组件，添加过渡动画，通过添加或删除css类名来实现。 过渡的css类名： v-enter　　进入过渡的开始状态 v-enter-active　　进入活动状态 v-enter-to　　进入的结束状态 v-leave　　离开过渡的开始状态 v-leave-active　　离开活动状态 v-leave-to　　离开结束状态 过渡模式： in-out　　先进后出 out-in　　先出后进 用法： 做一个淡隐淡出效果 把想要运动的元素放到里面，设置模式。
uniapp中一个页面内组件来回切换
weixin_57400398的博客
02-17 1953
父子组件传参,页面内多组件切换
uniapp小程序利用transition实现吸顶效果
qq_68153822的博客
06-20 1201
(zero-custom-bar、v-tab是第三方插件库，可以去插件市场搜索。Topbar是我自己封装的一个自定义组件，可以根据手机屏幕的不同动态计算导航栏高度)需要利用scroll-view监听页面滚动距离（注意，需要添加:throttle="false"关闭内置的节流阀）当isshow为true是导航栏就淡出，当isshow为false就淡入。然后利用官网的transition组件实现吸顶效果(选用淡入淡出)scrollTop监听页面滚动变化。
uniapp中uni-transition过渡组件溢出隐藏问题；
zhanghaoplc的博客
10-12 1414
uni-transition过渡组件在使用过程中,slide-top线性划入时,整个过渡块没有做到溢出隐藏; 这时,我们需要为uni-transition标签加上一个父元素; 让他溢出隐藏 <view style="overflow:hidden"> <uni-transition .../> </view> ...
uni/vue transition不生效的解决办法
qq_33256701的博客
05-24 5474
uni中目前还是使用vue2 自上而下的过渡效果： /** * 从底部飞入 */ .fly-in-from-bottom { // 进入过渡生效，离开过渡生效 &-enter-active, &-leave-active { transition: transform .3s; } &-enter, &-leave-to { transform: translate3d(0, 100%, 0); } } 注意： 1、背景不跟着产生过渡效果的原
vue2.0-transition多个元素
weixin_33871366的博客
06-12 132
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;智能社——http://www.zhinengshe.com&lt;/title&gt; &lt;meta name="viewpo
vue的transition组件的使用
一念执着。c的博客
04-10 2401
主要实现的是页面跳转的时候一个页面从左边出去，一个页面从右边进来，通过css3实现的，可以自己自行修改 html代码 &lt;template&gt; &lt;div id="app"&gt; &lt;div class="router-parent"&gt; &lt;transition :name="transitionName" mode=&quo
详解如何给React-Router添加路由页面切换时的过渡动画
12-03
使用过Vue2的同学们应该都知道<transition>这个内置组件，它可以帮我们添加过渡动画，之前一直用它来给Vue-Router路由的跳转添加转场动画，使用起来非常便捷。那在React中应该如何给路由切换添加过渡动画呢？ react...
Vue运用transition实现过渡动画
11-29
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。官方文档css过渡 通过点击事件来切换show的值来改变显示的文本，下面的css通过进入离开时的在匀速状态下xxs（秒）下来转换在x轴上位移的距离， ...
Vue学习笔记进阶篇之多元素及多组件过渡
12-09
本文介绍了vue 多元素及多组件过渡，这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意： 当有相同标签名的元素切换时，需要通过 ...
vue中组件的过渡动画及实现代码
12-29
1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </...
uniapp组件-uni-transition过渡动画
热门推荐
~~
03-02 2万+
过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等 一、基础过渡动画 <template> <view> <uni-section title="基础过渡动画" type="line"></uni-section> <view class="example-body"> <button @click="open(['slide-top'])">slide-top</butt
vue组件切换时使用过渡(transition)时应该注意的一些事项
Encorehwang的博客
01-04 2万+
最近在做公司项目时，涉及到做一个问卷调查，需要在不同题目题目之间使用transition产生一个过渡效果：当点击按钮进入下一题时，当前卡片从正中间向左滑动至不可见后，下一题对应的卡片从右边不可见区域从右向左滑动至屏幕正中间，在这个过程中我发现了几个问题，下面是该部分对应的代码<transition :name="slide"> <keep-alive> <component
Vue实现购物车页面
LV_MING_zg的博客
07-31 1186
Vue实现购物车的简单页面 第一部分： 引入vue.js: <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue.min.js" ></script> 第二部分： html代码：div布局，表格嵌套 <div id = "app"> <div v-if="shops.length
【vue2.0进阶篇】用transition组件轻松实现过渡效果
qq_24520459的博客
06-02 975
实现过渡的动画效果已经不是什么稀奇的事，是每一个前端开发者都要必备的技能。在不依赖第三方框架的库的前提下，实现动画最简单的办法就是使用CSS3给我们提供的属性。这一节...
【Vue】实现简单的购物车页面
SEVLT
05-10 765
效果预览：https://sevlt.github.io/vue-shopping-cart/index.html Html 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0.
vue-购物车商品的添加、删除和计算总金额功能
qq_46606159的博客
03-21 1372
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> </head> <body> <div id="box"> &lt...
uni-transition自定义动画
最新发布
08-19
你可以使用uni-transition来创建自定义动画。uni-transition是CSDN开发的一种动画库，用于在Vue.js应用程序中添加过渡效果。 要使用uni-transition，你需要先安装它。在Vue.js项目中，你可以使用npm或yarn来安装uni-transition： ``` npm install uni-transition ``` 或者 ``` yarn add uni-transition ``` 安装完成后，你可以在Vue组件中引入uni-transition，并在需要应用动画的元素上使用相应的指令。 下面是一个示例，演示如何使用uni-transition创建一个自定义动画： ```vue <template> <div> <button @click="toggleAnimation">Toggle Animation</button> <div v-uni-transition="animationOptions" :class="{ 'animated': animate }"> <!-- Your content here --> </div> </div> </template> <script> import { UniTransition } from 'uni-transition'; export default { data() { return { animate: false, animationOptions: { enterActiveClass: 'fade-in', leaveActiveClass: 'fade-out', duration: 500, }, }; }, directives: { uniTransition: UniTransition, }, methods: { toggleAnimation() { this.animate = !this.animate; }, }, }; </script> <style scoped> .animated { transition-property: opacity; } .fade-in-enter-active { opacity: 0; transition-duration: 500ms; } .fade-in-leave-active { opacity: 0; transition-duration: 500ms; } .fade-in-enter-to, .fade-in-leave-from { opacity: 1; } </style> ``` 在上面的示例中，我们创建了一个按钮，点击按钮将切换动画的状态。元素上使用了v-uni-transition指令，并传递了animationOptions对象，其中指定了动画的类名和持续时间。在示例中，我们使用了fade-in和fade-out类来定义淡入淡出的效果。 当点击按钮时，animate属性的值将被切换，从而触发动画的进入或离开状态。 你可以根据需要自定义动画的效果和属性，例如动画类名、持续时间、延迟等。通过使用uni-transition，你可以轻松地为Vue.js应用程序添加自定义的过渡动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值