精华内容
下载资源
问答
  • vue transition动画 fixed定位初始化错乱

    千次阅读 2020-04-05 17:48:16
    vue组件切换动画fixed定位会导致页面初始化错乱一下,有解决办法欢迎交流 <transition :name="$store.state.global.EXCESSIVE"> <router-view/> </transition> .slide-right-enter-...

     vue组件切换动画

     但fixed定位会导致页面初始化错乱一下,有解决办法欢迎交流

    <transition :name="$store.state.global.EXCESSIVE">
                <router-view/>
            </transition>
    
    
    
    
    .slide-right-enter-active,
        .slide-right-leave-active,
        .slide-left-enter-active,
        .slide-left-leave-active {
            will-change: transform;
            transition: all 500ms;
            position: absolute;
        }
    
        .slide-right-enter {
            opacity: 0;
            transform: translateX(-100%);
            z-index: -10;
        }
    
        .slide-right-leave-active {
            opacity: 0;
            transform: translateX(100%);
        }
    
        .slide-left-enter {
            opacity: 0;
            transform: translateX(100%);
        }
    
        .slide-left-leave-active {
            opacity: 0;
            transform: translateX(-100%);
            z-index: -10;
        }

     

    展开全文
  • 让我们实现这个动画吧。 如下图: 通过动图可以发现移动的曲线是蜿蜒曲折的,这就用到了贝塞尔曲线。...使用vue提供的vue动画和贝塞尔曲线来实现移动动画 vue动画详情链接 HTML <template>

    需求分析:进入产品列表,点击缩略图旁+号,有个该商品被动态添加到购物车的动画。让我们实现这个动画吧。

    如下图:

    在这里插入图片描述

    通过动图可以发现移动的曲线是蜿蜒曲折的,这就用到了贝塞尔曲线。

    他的弧度是这样的。
    在这里插入图片描述

    贝塞尔曲线链接

    实现原理:先创建一个隐藏的圆点在购物车icon那里。当点击+号时,让圆点先移动到当前点击+的位置并让其显示。然后开始动画,让圆点移动回到原来的购物车icon位置并让其隐藏。

    使用vue提供的vue动画和贝塞尔曲线来实现移动动画

    vue动画详情链接

    1. HTML
    <template>
       <div>
           <van-nav-bar
               title="图书战术"
               left-text="返回"
               left-arrow
               @click-left="onClickLeft"
           >
               <template #right>
                   <van-icon name="cart-o" size="18" />
                   <div class="shop_car_icon">{{ shopCarNum }}</div>
               </template>
           </van-nav-bar>
           <div class="bookmall__list">
               <ul>
                   <li class="bookmall__item" v-for="(item, index) in testList" :key="index" @click="goBookUrl(item)">
                       <div class="bookmall__item-left">
                           {{ item }}
                       </div>
                       <div class="bookmall__item-right">
                           <h5>{{ item }} <span>{{ item }}</span></h5>
                           <p><span>分类:</span>{{ item }}<span style="margin-left: 10px;padding: 10px;" class="shopCarAdd" @click.stop="addToShopCars"><van-icon name="add" color="rgb(238, 57, 57"/></span></p>
                           <p class="bookmall__item-right-tag"><span>标签:</span>{{ item }}</p>
                           <p class="bookmall__item-right-sub2">
                               {{ item }}
                           </p>
                       </div>
                   </li>
               </ul>
           </div>
           <transition
           @before-enter="beforeEnter"
           @enter="enter"
           @after-enter="afterEnter"
           >
               
               <div class="shop_car_ball" v-show="shopCarBall">
                   <div class="linner_ball">
                       <van-icon name="add" color="rgb(238, 57, 57"/>
                   </div>
               </div>
               
           </transition>
       </div>
    </template>
    
    1. CSS
    .van-nav-bar {
       position: fixed;
       width: 100%;
    }
    .shop_car_icon {
       position: absolute;
       top: 10px;
       right: -8px;
       font-size: 10px;
       background-color: rgb(238, 57, 57);
       border-radius: 50%;
       text-align: center;
       color: rgb(82, 80, 80);
       line-height: 0;
       display: table-cell;
       vertical-align: middle;
       padding: 8px 2px;
    }
    .bookmall__list {
       padding-top: 40px;
       .bookmall__item {
           display: flex;
           padding: 10px;
           border-bottom: 1px a #000;
           .bookmall__item-left {
               flex: 25%;
               margin-right: 5px;
               img {
                   width: 90px;
               }
           }
           .bookmall__item-right {
               flex: 75%;
               height: 130px;
               overflow: hidden;
               h5 {
                   font-size: 16px;
                   span {
                       margin-left: 65px;
                       font-weight: 400;
                       font-size: 12px;
                       color: rgb(107, 106, 106);
                   }
               }
               p {
                   font-size: 13px;
               }
               .bookmall__item-right-tag {
                   color: rgb(119, 118, 118);
               }
               
           }
       }
    }
    .bookmall__item .bookmall__item-right-sub2 ::after {
       content: "...";
       position: absolute;
       right: 0;
       bottom: 0;
    }
    
    .shop_car_ball {
       position: fixed;
       top: 10px;
       right: 12px;
       z-index: 9;
       font-size: 16px;
       // transition: all .25s cubic-bezier(0.49, -0.29, 0.75, 90.41);
       /* 贝塞尔曲线 */
       transition: all .25s cubic-bezier(.17, .86, .73, .14);
       .linner_ball {
           transition: all .25s linear;
       }
    }
    
    
    1. JS
    export default {
       data () {
           return {
               shopCarNum: window.localStorage.getItem('shopcarnum') || 0,
               shopCarBall: false,
               shopCarBallEl: null,
               ss: null,
               // demo测试数据
               testList: new Array(1,2,3,4,5)
           }
       },
       methods: {
           addToShopCars (e) {
               this.shopCarBallEl = e.target
               this.shopCarBall = true
           },
           // 动画开始
           beforeEnter (el) {
           	   // 获取元素的大小及其相对于视口的位置
               const dom = this.shopCarBallEl.getBoundingClientRect()
               const offsetX = window.innerWidth - dom.left - 16
               const offsetY = dom.top - 22
       
               el.style.display = ''
               // y轴是曲直向上的,x轴是蜿蜒的向右的
               el.style.transform = `translate3d(0, ${offsetY}px, 0)`
               
               
               const linnerBall = el.querySelector('.linner_ball')
               linnerBall.style.transform = `translate3d(-${offsetX}px, 0, 0)`
           },
           enter (el, done) {
               // 触发重绘,来实现动画的移动过程
               this.ss = document.body.offsetHeight
               el.style.transform = `translate3d(0, 0, 0)`
    
               const linnerBall = el.querySelector('.linner_ball')
               linnerBall.style.transform = `translate3d(0, 0, 0)`
               el.addEventListener('transitionend', done)
           },
           afterEnter (el) {
               this.shopCarBall = false
               el.style.display = 'none'
               this.shopCarNum++
           }
       },
       watch: {
       	// 监听shopCarNum属性,只考虑新增。新增时储存本地做永久化处理
           shopCarNum (newValue) {
               window.localStorage.setItem('shopcarnum', newValue)
           }
       }
    }
    

    这样我们就实现购物车的动态添加demo。

    展开全文
  • vue动画使用

    2020-11-06 09:28:44
    } } .conApprovalBox { .opac { position: fixed; height: 100vh; width: 100vw; background-color: #000; opacity: 0.2; } .userInfoBox { display: flex; justify-content: center; width: 100vw; height: 100vh;...
    <template>
      <transition name="approvalList-fadein">
        <div class="conApprovalBox" v-if="isShow">
          <div class="opac"></div>
          <div class="userInfoBox">
            <div class="userInfo">
              <div class="title">确定审批人</div>
              <div class="content">
                <img class="headPic" src="" alt="">
                <div class="user">
                  <span class="nameBox">
                    <span class="name">{{ appovalData.name }} </span>
                    <span class="alias">({{ appovalData.alias }})</span>
                  </span>
                  <div class="describe">{{ appovalData.describe }}</div>
                </div>
              </div>
              <div class="operate">
                <span @click="fnEdit" class="modify">修改</span>
                <span @click="fnConfirm" class="confirm">确定</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
    export default {
      name: 'ConApproval',
      props: {
        isShow: {
          type: Boolean,
          required: false
        },
        appovalData: {
          type: Object,
          required: true
        }
      },
      methods: {
        fnEdit() {
          this.$emit('fnEdit')
        },
        fnConfirm() {
          this.$emit('fnConfirm')
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .approvalList-fadein-enter-active {
      animation: approvalList-fadein 0.4s;
      .userInfo {
        animation: approvalList-zoom 0.4s;
      }
    }
    @keyframes approvalList-fadein {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes approvalList-zoom {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }
    .conApprovalBox {
      .opac {
        position: fixed;
        height: 100vh;
        width: 100vw;
        background-color: #000;
        opacity: 0.2;
      }
      .userInfoBox {
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 100vh;
      }
      .userInfo {
        position: fixed;
        width: 5.88rem;
        height: 4.2rem;
        background-color: #fff;
        top: 17%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        border-radius: 0.24rem;
        .title {
          font-family: PingFangSC-Regular;
          font-size: 0.32rem;
          color: #030303;
          text-align: center;
          margin-top: 0.4rem;
          overflow: hidden;
        }
        .content {
          display: flex;
          margin-top: 0.74rem;
          padding: 0 0.4rem;
          box-sizing: border-box;
          .headPic {
            display: block;
            border-radius: 50%;
            width: 0.8rem;
            height: 0.8rem;
            background-color: red;
            margin-right: 0.2rem;
          }
          .user {
            flex: 1;
            margin-top: -25px;
            .nameBox {
              .name {
                font-family: PingFangSC-Regular;
                font-size: 0.32rem;
                color: #333333;
              }
              .alias {
                font-family: PingFangSC-Regular;
                font-size: 0.26rem;
                color: #4f77aa;
              }
            }
            .describe {
              font-family: PingFangSC-Regular;
              font-size: 0.28rem;
              color: #969799;
              line-height: 0.3rem;
            }
          }
        }
        .operate {
          display: flex;
          position: absolute;
          bottom: 0;
          height: 1rem;
          width: 100%;
          border-top: 1px solid #f5f5f5;
          span {
            text-align: center;
            line-height: 1rem;
            flex: 1;
            font-family: PingFangSC-Regular;
            font-size: 0.32rem;
            color: #2590ff;
          }
          .modify {
            border-right: 1px solid #f5f5f5;
          }
        }
      }
    }
    </style>
    
    
    展开全文
  • //vue动画部分 //1.<transition>中间是动画的html</transition>,通过css设定动画元素的位置 //2.进入动画之前获得点击元素的位置,把小球移过来(transform过渡过来) //3.进入动画之时,把小球返回到...

    本篇使用JavaScript钩子函数进行过渡和动画@before-enter   @enter      @after-enter

    模拟点击购物, 把商品扔到 购物车的 动画效果

        //vue  动画部分

        //1. <transition> 中间是动画的html</transition>,通过css设定动画元素的位置

        // 2.进入动画之前获得 点击元素的位置,把小球移过来(transform过渡过来)

        //3.进入动画之时,把小球返回到原来的位置

     

    <template>

      <div>

        <el-row>

          <el-col :span="6" v-for="(item, index) in goods" :key="index">

            <el-card>

              <img :src="item.img" class="image" alt="books" />

              <div style="padding:14px;">

                <span>{{ item.title }}</span>

                <el-button

                  type="text"

                  class="button"

                  @click="addCart($event, item)"

                >

                  <i class="el-icon-circle-plus"></i>

                  添加

                </el-button>

              </div>

            </el-card>

          </el-col>

        </el-row>

        <!-- vue动画的html -->

        <div class="ball-warp">

          <transition

            name="fade"

            @before-enter="beforeEnter"

            @enter="enter"

            @after-enter="afterEnter"

          >

            <div class="ball" v-show="ball.show">

              <div class="inner">

                <div class="el-icon-circle-plus"></div>

              </div>

              <!-- <div class="el-icon-circle-plus"></div> -->

            </div>

          </transition>

        </div>

      </div>

    </template>

     

    <script>

    import axios from "axios";

    export default {

      data() {

        return {

          goods: [],

          ball: {

            show: false,

            el: null

          }

        };

      },

      async created() {

        let res = await axios.get("./api/goods");

        this.goods = res.data.data;

        console.log(res);

      },

      methods: {

        addCart($event, item) {

          this.ball.el = $event.target;//点击的位置

          this.ball.show = true;

          this.$store.commit("addcart", item);

        },

        //vue  动画部分

        //1. <transition> 中间是动画的html</transition>,通过css设定动画元素的位置

        // 2.进入动画之前获得 点击元素的位置,把小球移过来(transform过渡过来)

        //3.进入动画之时,把小球返回到原来的位置

        beforeEnter(el) {

          //小球移动过来到点击的位置

          let dom = this.ball.el;

          console.log(el);

          let rect = dom.getBoundingClientRect(); //获取某个元素相对于视窗的位置集合

          console.log(rect);

          let x = window.innerWidth - rect.left - 130;

          let y = rect.top - 25;

          el.style.display = "";

          // el.style.transform = "translate3d(-" + x + "px," + y + "px, 0)";

          el.style.transform = "translate3d(0," + y + "px, 0)";

          let inner = el.querySelector(".inner");

          inner.style.transform = "translate3d(-" + x + "px, 0, 0)";

        },

        enter(el, done) {

          console.log(el);

          console.log(done);

          this._offset = document.body.offsetHeight;

          el.style.transform = `translate3d(0,0,0)`;

          let inner = el.querySelector(".inner");

          inner.style.transform = `translate3d(0,0,0)`;

          el.addEventListener("transitionend", done); //动画结束

        },

        afterEnter(el) {

          this.ball.show = false;

          el.style.display = "none";

        }

      }

    };

    </script>

     

    <style lang="stylus" scoped>

    .ball-warp

      .ball

        position fixed

        right 90px

        top 25px

        z-index 200

        color red

        transition all 1s cubic-bezier(0.49,-0.29,0.75,0.41)

        .inner

          width:16px;

          heiht:16px;

          transition all 1s linear

    </style>

     

    展开全文
  • Vue居中弹窗加vue动画

    2020-02-23 16:44:22
    position: fixed; height: 100%; background: rgba(0, 0, 0, 0.6); width: 100%; top: 0; left: 0; z-index: 10 } .content{ background-color: #ffffff; z-index: 20; position: fixed; width: 200px;...
  • vue动画

    2018-08-14 22:33:00
    没有动画效果 显示有点生硬<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head>...
  • vue动画-自定义组件

    千次阅读 2019-08-05 13:04:53
    在开发时,有时候一些组件满足不了目前的需求,这时候就需要自己开发组件了,然后使用自己开发的组件(插件)到项目中,组件的引用方式有两种,一种是import,另一种是vue.use(),element-ui在引用时就要 import ...
  • vue动画轻提示

    2021-03-20 12:52:30
       (5)弹出消失都有动画效果。 子组件: <template> <view class="app"> [Tips.light===exit?'pointOut':'']"> <text>{{Tips.text}}text> ()" src=...
  • 小球飞入购物车,是购物类 APP 常见的效果,飞入的动画效果可以有多种方式来实现。 1、技术方案 css 有两种方法可以实现同样的效果: 1、利用 animation 动画 2、利用 transform 和 transition javascript 中也有...
  • 本文主要和大家详细介绍了vue实现页面加载动画效果,vue页面出现正在加载的初始页面与实现动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。:style="{background: option.background...
  • position: fixed; left: 50%; top: 28%; transform: translate(-50%, 0); } .nav { background-color: #fff; color: white; margin-right: 10px; font-size: 20px; display: inline-block; width: 33.4px; height: ...
  • vue2.0 动画+ stylus

    2018-08-11 11:27:59
    一个vue2.0动画+stylus的博客文章地址:https://www.cnblogs.com/jr1993/p/vue.html 以前这样子写的 &lt;div transition="move" class="cart-decrease" v-show="food.count&...
  • vue切换动画

    2020-07-26 20:30:44
    position: fixed; left:0; right: 0; width: 100%; background-color: white; } .slide-fade-enter, .slide-fade-leave-to { left:0; top: 0; right: 0; position: absolute; transform:translateX(-500px...
  • VUE过渡动画

    2020-01-14 11:51:01
    在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 3.v-enter-to:2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后...
  • vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage,页面刷新... 主要是解决transform动画,position:fixed异常问题 像往常一样使用 npm i vue-route-transit
  • vue_cli动画

    2021-05-05 00:33:35
    vue_cli动画常见动画--从右向左显示 常见动画–从右向左显示 在路由index.js中 { path: '/parent', name: 'Parent', component: Parent, children: [ { path: '/parent/ChildrenA', name: 'ChildrenA', ...
  • 开始之前您需要有 vue 基础,以及安装好 vue-cli 开始 新建 vue 项目:vue init webpack vuexlearn 记住安装的时候需要选择 vue-router 进入 vuexlearn 目录之后安装 vuex: 这里使用 npm...
  • vue实现购物车动画

    千次阅读 2019-02-28 16:07:34
    1、cartControl.vue (1)定义添加的点击事件 &lt;div class="cart-add icon-arrow_lift" @click="addCart($event)"&gt;&lt;/div&gt; (2)在addCart中添加如下代码 addCart...
  • vue滚动监听动画事件

    2019-10-26 17:21:21
    在项目中,我们时常要用到固定侧边栏、广告等,但是仅仅用position:fixed;太单调了,我们就需要给它加一个动画 那么怎么给它加一个好看的动画呢? 这是我实现的一个超级简单的向下滚动的动画,虽然简单但是很好看。...
  • (记录一下,下次直接用)实现原理大概如下:css.timeNum {.daoJiShi {position: fixed;top: 50%;left: 50%;font-size: 150px;height: 150px;animation: flipOutY 1s ease both infinite;-webkit-animatio...
  • vue-router 页面切换动画

    千次阅读 2018-01-22 19:34:42
    vue-router 页面切换动画网上一直没翻到 vue-router 翻页动画的完美实现,就心[bei]动[bi]的,编了一个简单的动画组件。支持简单的前进后退的左右动画,针对不支持 history.state 的浏览器,也能支持简单的透明动画...
  • vue过度动画失效之坑

    千次阅读 2019-02-27 04:16:47
    给一个固定定位的A标签加上vue的transition动画时,如果A标签的css有transform属性时,vue的一些过度动画会失效; A{ width: 6.6667rem; // height: 4rem; background-image: url("./assets/image/envelop.png"); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,806
精华内容 1,122
关键字:

fixedvue动画

vue 订阅