精华内容
下载资源
问答
  • 最近公司项目加了个页面,其中要求是这样的,点击对应...说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家,先上效果图: vue页面: (item,index)> (index)> <h3>2018年0{{index+6}}月</h3>
  • vue使用vue画多边形 V点 (V-Pip) Tiny vue wrapper for ... 微型vue包装器,用于支持本机画中画模式。 View Demo 查看演示 View Github 查看Github 要求 (Requirements) Vue.js 2.xVue.js 2.x 安装 (Instal...

    vue使用vue画多边形

    V点 (V-Pip)

    Tiny vue wrapper for supporting native picture-in-picture mode.

    微型vue包装器,用于支持本机画中画模式。

    要求 (Requirements)

    安装 (Installation)

    npm install v-pip # yarn add v-pip

    CDN: UNPKG | jsDelivr (available as window.VPip)

    CDN: UNPKG | jsDelivr (可作为window.VPip )

    用法 (Usage)

    Register the component globally:

    全局注册组件:

    Vue.component('VPip', require('v-pip'));

    Or use locally

    或在本地使用

    import VPip from 'v-pip';
    refer App.vue)请参阅App.vue )

    HTML (HTML)

    <v-pip
        :video-options="videoOptions"
        :button-options="buttonOptions"
        @video-in-pip="handlePIP"
        @requesting-pip-failure="handlePipOpenFailure"
        @exiting-pip-failure="handlePipExitFailure"
      />

    JS (JS)

    import VPip from 'v-pip';
    
    Vue.component('example-component', {
      components: {
        VPip,
      },
      data: () => ({
        isPip: false,
        videoOptions: {
          wrapper: '',
          src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          poster: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
        },
        buttonOptions: {
          wrapper: '',
          type: 'button',
          class: '',
          label: 'Toggle picture-in-picture',
        },
      }),
      methods: {
        handlePIP(e) {
          this.isPip = e;
        },
        handlePipOpenFailure(err) {
          console.log('Video failed to enter Picture-in-Picture mode.', err);
        },
        handlePipExitFailure(err) {
          console.log('Video failed to leave Picture-in-Picture mode.', err);
        },
      },
    });
    Example 2 (minimal) 示例2(最小值)

    HTML (HTML)

    <v-pip :video-options="videoOptions" />

    JS (JS)

    import VPip from 'v-pip';
    
    Vue.component('example-component', {
      components: {
        VPip,
      },
      data: () => ({
        videoOptions: {
          src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        },
      }),
    });

    道具 (Props)

    NameTypeRequired?Description
    video-optionsObjectYesThe set of options required to setup the V-Pip component. defaults: L32-L42
    button-optionsObjectNoThe set of options for the toggle button defaults: L48-L53
    名称 类型 需要? 描述
    video-options 目的 设置V-Pip组件所需的一组选项。 默认值: L32-L42
    button-options 目的 没有 切换按钮的默认选项集: L48-L53

    大事记 (Events)

    NameDescription
    video-in-pipEmits an Boolean whether the Video is in PIP or not
    requesting-pip-failureEmits an Object when the video fails to enter Picture-in-Picture mode.
    exiting-pip-failureEmits an Object when the video fails to leave Picture-in-Picture mode.
    名称 描述
    video-in-pip 不管视频是否在PIP中,都发出一个Boolean
    requesting-pip-failure 视频无法进入画中画模式时,发出Object
    exiting-pip-failure 视频无法退出画中画模式时,发出Object

    贡献 (Contributing)

    1. Fork it!

      叉子!

    2. Create your feature branch: git checkout -b my-new-feature

      创建功能分支: git checkout -b my-new-feature

    3. Commit your changes: git commit -am 'Add some feature'

      提交更改: git commit -am 'Add some feature'

    4. Push to the branch: git push origin my-new-feature

      推送到分支: git push origin my-new-feature

    5. Submit a pull request :D

      提交拉取请求:D

    翻译自: https://vuejsexamples.com/tiny-vue-wrapper-for-supporting-native-picture-in-picture-mode/

    vue使用vue画多边形

    展开全文
  • 在开发基于vue.js的在线视频教育平台的时候,我们会注意一个小问题,就是如果用户在观看播放视频的同时,也会往下拖动窗口浏览一些评论,这样视频就会被滚动条覆盖,导致用户无法在浏览评论的同时观看视频,同理,...

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_125

    在开发基于vue.js的在线视频教育平台的时候,我们会注意一个小问题,就是如果用户在观看播放视频的同时,也会往下拖动窗口浏览一些评论,这样视频就会被滚动条覆盖,导致用户无法在浏览评论的同时观看视频,同理,如果想边刷微博边追剧怎么办?想边聊微信边看球赛怎么办?

    目前我们可以用h5的技术来解决这个问题,支持HTML5 播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。

    先看效果:

    可以看到,当触发了画中画特效,网站右下角就会出现一个小型的视频播放器,它能够浮动跟踪于窗口,这样就能在浏览信息的同时也可以观看视频。

    画中画看上去很酷炫,实际上,实现非常简单。

    // 进入画中画
    video.requestPictureInPicture();
    
    // 退出画中画
    document.exitPictureInPicture();
    

    为了方便用户进入和退出画中画模式,我们可以加一个按钮逻辑

    //画中画
    into:function(){
    
    if (video !== document.pictureInPictureElement) {
    // 尝试进入画中画模式
    video.requestPictureInPicture();    
    this.mymsg = '退出画中画';  
    } else {
    // 退出画中画
    document.exitPictureInPicture();
    this.mymsg = '进入画中画';
    }
    
    }
    

    需要注意一点,使用画中画需要为视频空间添加一个选择器id=“video”,这虽然违背vue的数据双向绑定理念,但是目前控制方法只能如此

    <video id="video"  width="320" height="240" src="http://localhost:8000/static/upload/test.mp4" controls="controls" autoplay="autoplay" muted loop="loop" >
                        您的浏览器不支持 video 标签。
                        </video>
    

    虽然简单,但是有效,做产品就得注意细节,就算是研发岗位也得有产品思想,否则就会被时代淘汰,最后奉上代码仓库项目地址:https://gitee.com/QiHanXiBei/myvue

    原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_125

    展开全文
  • Vue的Lottie动画视图( , ) 由生成 Bodymovin.js的包装 是插件,用于将动画导出为JSON,并且它还提供bodymovin.js以便将动画提供为svg / canvas / html。 演示版 为什么是洛蒂? 灵活的After Effects功能 我们...
  • 我也曾想着就用jquery去实现吧 代码多一点无所谓了 但最后却不是这样 vue好像和jquery的有些插件冲突了 只要vue已导入 那些用jquery实现的动画 就不能用 但又不能不用vue 没办法 这些效果只能用vue来实现了 vue...
  • 例子实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我在实现一个列表展示需求的时候,PM想让这个列表具有拖动排序的功能,方便他操作(事实上我最后并没有给他做哈哈),拖动的动画跟...
  • Vue.js的动画

    千次阅读 2019-02-24 15:23:44
    文章目录[Vue中的动画](https://cn.vuejs.org/v2/guide/transitions.html)使用过渡类名修改v-前缀[使用第三方 CSS 动画库](https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡类名)使用动画钩子函数使用...

    Vue中的动画

    为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;

    使用过渡类名

    1. HTML结构:
    <div id="app">
        <input type="button" value="动起来" @click="myAnimate">
        <!-- 使用 transition 将需要过渡的元素包裹起来 -->
        <transition name="fade">
          <div v-show="isshow">动画哦</div>
        </transition>
      </div>
    
    1. VM 实例:
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        isshow: false
      },
      methods: {
        myAnimate() {
          this.isshow = !this.isshow;
        }
      }
    });
    
    1. 定义两组类样式:
    /* 定义进入和离开时候的过渡状态 */
        .fade-enter-active,
        .fade-leave-active {
          transition: all 0.2s ease;
          position: absolute;
        }
    
        /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
        .fade-enter,
        .fade-leave-to {
          opacity: 0;
          transform: translateX(100px);
        }
    

    在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <!-- 2. 自定义两组样式,来控制 transition 内部的元素实现动画 -->
      <style>
        /* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
        /* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(150px);
        }
    
        /* v-enter-active 【入场动画的时间段】 */
        /* v-leave-active 【离场动画的时间段】 */
        .v-enter-active,
        .v-leave-active{
          transition: all 0.8s ease;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
        <!-- 1. 使用 transition 元素,把 需要被动画控制的元素,包裹起来 -->
        <!-- transition 元素,是 Vue 官方提供的 -->
        <transition>
          <h3 v-if="flag">这是一个H3</h3>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>
    

    修改v-前缀

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <!-- 2. 自定义两组样式,来控制 transition 内部的元素实现动画 -->
      <style>
        /* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
        /* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(150px);
        }
    
        /* v-enter-active 【入场动画的时间段】 */
        /* v-leave-active 【离场动画的时间段】 */
        .v-enter-active,
        .v-leave-active{
          transition: all 0.8s ease;
        }
    
    
    
    
        .my-enter,
        .my-leave-to {
          opacity: 0;
          transform: translateY(70px);
        }
    
        .my-enter-active,
        .my-leave-active{
          transition: all 0.8s ease;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
        <!-- 1. 使用 transition 元素,把 需要被动画控制的元素,包裹起来 -->
        <!-- transition 元素,是 Vue 官方提供的 -->
        <transition>
          <h3 v-if="flag">这是一个H3</h3>
        </transition>
    
    
        <hr>
    
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
          <h6 v-if="flag2">这是一个H6</h6>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false,
            flag2: false
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>
    

    使用transition name="my"来替换v-前缀

    使用第三方 CSS 动画库

    1. 导入动画类库:
    <link rel="stylesheet" type="text/css" href="./lib/animate.css">
    
    1. 定义 transition 及属性:
    <transition
    	enter-active-class="fadeInRight"
        leave-active-class="fadeOutRight"
        :duration="{ enter: 500, leave: 800 }">
      	<div class="animated" v-show="isshow">动画哦</div>
    </transition>
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <link rel="stylesheet" href="./lib/animate.css">
      <!-- 入场 bounceIn    离场 bounceOut -->
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
        <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
          <h3 v-if="flag">这是一个H3</h3>
        </transition> -->
    
        <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
        <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
          <h3 v-if="flag" class="animated">这是一个H3</h3>
        </transition> -->
    
        <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
        <transition 
        enter-active-class="bounceIn" 
        leave-active-class="bounceOut" 
        :duration="{ enter: 200, leave: 400 }">
          <h3 v-if="flag" class="animated">这是一个H3</h3>
        </transition> 
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>
    

    使用动画钩子函数

    1. 定义 transition 组件以及三个钩子函数:
    <div id="app">
        <input type="button" value="切换动画" @click="isshow = !isshow">
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
          <div v-if="isshow" class="show">OK</div>
        </transition>
      </div>
    
    1. 定义三个 methods 钩子方法:
    methods: {
            beforeEnter(el) { // 动画进入之前的回调
              el.style.transform = 'translateX(500px)';
            },
            enter(el, done) { // 动画进入完成时候的回调
              el.offsetWidth;
              el.style.transform = 'translateX(0px)';
              done();
            },
            afterEnter(el) { // 动画进入完成之后的回调
              this.isshow = !this.isshow;
            }
          }
    
    1. 定义动画过渡时长和样式:
    .show{
          transition: all 0.4s ease;
        }
    

    使用钩子函数模拟小球半场动画

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .ball {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: red;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">
        <!-- 1. 使用 transition 元素把 小球包裹起来 -->
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <div class="ball" v-show="flag"></div>
        </transition>
      </div>
    
      <script>
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            // 注意: 动画钩子函数的第一个参数:el,表示 要执行动画的那个DOM元素,是个原生的 JS DOM对象
            // 大家可以认为 , el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
            beforeEnter(el){
              // beforeEnter 表示动画入场之前,此时,动画尚未开始,可以 在 beforeEnter 中,设置元素开始动画之前的起始样式
              // 设置小球开始动画之前的,起始位置
              el.style.transform = "translate(0, 0)"
            },
            enter(el, done){
              // 这句话,没有实际的作用,但是,如果不写,出不来动画效果;
              // 可以认为 el.offsetWidth 会强制动画刷新
              el.offsetWidth
              // enter 表示动画 开始之后的样式,这里,可以设置小球完成动画之后的,结束状态
              el.style.transform = "translate(150px, 450px)"
              el.style.transition = 'all 1s ease'
    
              // 这里的 done, 起始就是 afterEnter 这个函数,也就是说:done 是 afterEnter 函数的引用
              done()
            },
            afterEnter(el){
              // 动画完成之后,会调用 afterEnter
              // console.log('ok')
              this.flag = !this.flag
            }
          }
        });
      </script>
    </body>
    
    </html>
    

    v-for 的列表过渡

    1. 定义过渡样式:
    <style>
        .list-enter,
        .list-leave-to {
          opacity: 0;
          transform: translateY(10px);
        }
    
        .list-enter-active,
        .list-leave-active {
          transition: all 0.3s ease;
        }
    </style>
    
    1. 定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:
      <div id="app">
        <input type="text" v-model="txt" @keyup.enter="add">
    
        <transition-group tag="ul" name="list">
          <li v-for="(item, i) in list" :key="i">{{item}}</li>
        </transition-group>
      </div>
    
    1. 定义 VM中的结构:
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            txt: '',
            list: [1, 2, 3, 4]
          },
          methods: {
            add() {
              this.list.push(this.txt);
              this.txt = '';
            }
          }
        });
    

    列表的排序过渡

    <transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用

    • v-movev-leave-active 结合使用,能够让列表的过渡更加平缓柔和:
    .v-move{
      transition: all 0.8s ease;
    }
    .v-leave-active{
      position: absolute;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        li {
          border: 1px dashed #999;
          margin: 5px;
          line-height: 35px;
          padding-left: 5px;
          font-size: 12px;
          width: 100%;
        }
    
        li:hover {
          background-color: hotpink;
          transition: all 0.8s ease;
        }
    
    
    
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateY(80px);
        }
    
        .v-enter-active,
        .v-leave-active {
          transition: all 0.6s ease;
        }
    
        /* 下面的 .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
        .v-move {
          transition: all 0.6s ease;
        }
        .v-leave-active{
          position: absolute;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
    
        <div>
          <label>
            Id:
            <input type="text" v-model="id">
          </label>
    
          <label>
            Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    
        <!-- <ul> -->
          <!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
          <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
          <!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
          <!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
          <transition-group appear tag="ul">
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
              {{item.id}} --- {{item.name}}
            </li>
          </transition-group>
        <!-- </ul> -->
    
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '赵高' },
              { id: 2, name: '秦桧' },
              { id: 3, name: '严嵩' },
              { id: 4, name: '魏忠贤' }
            ]
          },
          methods: {
            add() {
              this.list.push({ id: this.id, name: this.name })
              this.id = this.name = ''
            },
            del(i) {
              this.list.splice(i, 1)
            }
          }
        });
      </script>
    </body>
    
    </html>
    

    小球动画

    实现小球抛物线然后消失。

    使用flag来控制小球隐藏

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .ball {
          width: 15px;
          height: 15px;
          background-color: red;
          border-radius: 50%;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
    
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter"
          @enter-cancelled="enterCancelled"
    
          @before-leave="beforeLeave"
          @leave="leave"
          @after-leave="afterLeave"
          @leave-cancelled="leaveCancelled">
          <div class="ball" v-show="flag"></div>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            beforeEnter(el){
              el.style.transform = 'translate(0, 0)'
              console.log("before:" + this.flag)
            },
            enter(el,done){
              el.offsetWidth
    
              el.style.transform = 'translate(150px, 450px)'
              el.style.transition = 'all 1s ease'
              console.log("enter:" + this.flag)
              done()
            },
            afterEnter(el){
              // 这句话, 第一个功能,是控制小球的显示与隐藏
              // 第二个功能: 直接跳过后半场动画,让 flag 标识符 直接变为 false
              // 当第二次再点击 按钮的时候, flag  false  ->    true
              this.flag = !this.flag
              console.log("afterEnter:" + this.flag)
               //el.style.opacity = 0.5
              // Vue 把一个完整的动画,使用钩子函数,拆分为了两部分:
              // 我们使用 flag 标识符,来表示动画的切换;
              // 刚以开始,flag = false  ->   true   ->   false
            },
    
            enterCancelled: function (el) {
              // ...
              console.log("enterCancelled:" + this.flag)
            },
    
            // --------
            // 离开时
            // --------
    
            beforeLeave: function (el) {
              // ...
              console.log("beforeLeave:" + this.flag)
            },
            // 当与 CSS 结合使用时
            // 回调函数 done 是可选的
            leave: function (el) {
              // ...
              console.log("leave:" + this.flag)
            },
            afterLeave: function (el) {
              // ...
              console.log("afterLeave:" + this.flag)
            },
            // leaveCancelled 只用于 v-show 中
            leaveCancelled: function (el) {
              // ...
              console.log("leaveCancelled:" + this.flag)
            }
          }
        });
      </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    使用el.style.opacit来控制小球隐藏,但是这种方法不行:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .ball {
          width: 15px;
          height: 15px;
          background-color: red;
          border-radius: 50%;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
    
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter"
          @enter-cancelled="enterCancelled"
    
          @before-leave="beforeLeave"
          @leave="leave"
          @after-leave="afterLeave"
          @leave-cancelled="leaveCancelled">
          <div class="ball" v-show="flag"></div>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            beforeEnter(el){
              el.style.transform = 'translate(0, 0)'
              console.log("before:" + this.flag)
            },
            enter(el,done){
              el.offsetWidth
    
              el.style.transform = 'translate(150px, 450px)'
              el.style.transition = 'all 1s ease'
              console.log("enter:" + this.flag)
              done()
            },
            afterEnter(el){
              // 这句话, 第一个功能,是控制小球的显示与隐藏
              // 第二个功能: 直接跳过后半场动画,让 flag 标识符 直接变为 false
              // 当第二次再点击 按钮的时候, flag  false  ->    true
              //this.flag = !this.flag
              console.log("afterEnter:" + this.flag)
               el.style.opacity = 0.5
              // Vue 把一个完整的动画,使用钩子函数,拆分为了两部分:
              // 我们使用 flag 标识符,来表示动画的切换;
              // 刚以开始,flag = false  ->   true   ->   false
            },
    
            enterCancelled: function (el) {
              // ...
              console.log("enterCancelled:" + this.flag)
            },
    
            // --------
            // 离开时
            // --------
    
            beforeLeave: function (el) {
              // ...
              console.log("beforeLeave:" + this.flag)
            },
            // 当与 CSS 结合使用时
            // 回调函数 done 是可选的
            leave: function (el) {
              // ...
              console.log("leave:" + this.flag)
            },
            afterLeave: function (el) {
              // ...
              console.log("afterLeave:" + this.flag)
            },
            // leaveCancelled 只用于 v-show 中
            leaveCancelled: function (el) {
              // ...
              console.log("leaveCancelled:" + this.flag)
            }
          }
        });
      </script>
    </body>
    
    </html>
    

    第一次点击的时候:
    在这里插入图片描述
    第二次点击:
    在这里插入图片描述
    所以 this.flag = !this.flag 这句话, 第一个功能,是控制小球的显示与隐藏。第二个功能: 直接跳过后半场动画,让 flag 标识符 直接变为 false

    源代码地址

    展开全文
  • 放到开头,这里重点说明下,大家如果啥问题咱就直接提‘lssues’吧,后面朋友遇到相同问题大家也可以参考 :house: 项目截图 :paperclip: 项目配置也是很简单 npm install vuepress-plugin-ribbon-animation -D or ...
  • 功能:在vue框架使用canvas画布实现自定义涂抹功能 说明: template页面代码块加入canvas标签宽高必须要设置: <canvas id="canvas" width="1050" height="565"> </canvas> return定义: export ...

    vue实现在canvas画布上实现绘制涂抹功能

    方式:vue+canvas
    功能:在vue框架中使用canvas画布实现自定义涂抹功能
    说明:
    template页面代码块中加入canvas标签宽高必须要设置:

    <canvas id="canvas" width="1050" height="565"> </canvas>
    

    return中定义:

    export default {
       data() {
        return {
          onoff:false,
          oldx:0,
          oldy:0,
          ctx:null,
          linecolor:'',//涂抹颜色
          linw:7,//涂抹粗细
          canvas:null,//canvas标签id
        }
       }
    }
    

    mounted中:

    mounted() {
    //下面this方法为调用触发画布的方法,可在自己的点击事件方法中调用 this.coverEdit()
       this.coverEdit();
      },
    

    methods中:

      methods: {
      //点击画布时触发
       coverEdit(){
          this.canvas=document.getElementById("canvas");
          this.ctx=this.canvas.getContext("2d");
          this.ctx.fillStyle="transparent";
          //动态获取canvas画布的宽this.canvas.width, 画布的高this.canvas.height
          this.ctx.fillRect(0,0,this.canvas.width, this.canvas.height);
          this.onoff=false;
          this.oldx=0;
          this.oldy=0;
          this.linecolor="red";
          this.linw=7;
          this.canvas.addEventListener("mousemove",this.canvasDraw,true);
          this.canvas.addEventListener("mousedown",this.canvasDown,false);
          this.canvas.addEventListener("mouseup",this.canvasUp,false);
        },
        canvasDown(event){
          if(this.hua==true){
              this.onoff=false
            }else{
              this.onoff=true;
              this.oldx=event.pageX-this.canvas.getBoundingClientRect().left;
              this.oldy=event.pageY-this.canvas.getBoundingClientRect().top;
                }
            },
            //鼠标弹起触发
         canvasUp(){
           this.onoff=false;
        },
        //涂抹绘制过程中触发
         canvasDraw(event){
          if(this.onoff==true){
             var newx=event.pageX-this.canvas.getBoundingClientRect().left;
             var newy=event.pageY-this.canvas.getBoundingClientRect().top;
             this.ctx.beginPath();
             this.ctx.moveTo(this.oldx,this.oldy);
             this.ctx.lineTo(newx,newy);
             this.ctx.strokeStyle=this.linecolor;
             this.ctx.lineWidth=this.linw;
             this.ctx.lineCap="round";
             this.ctx.stroke();
             this.oldx=newx;
             this.oldy=newy;
          }
                
        },
        //绘制完成后清除画布内容,也可继续写入自己的代码进行下一步操作
         completeMethod(){
          var canvas=document.getElementById("canvas");
          this.ctx=canvas.getContext("2d");
          this.ctx.clearRect(0,0,canvas.width,canvas.height);
        },
     }
    

    以上方法即可实现在画布中自定义涂抹绘制
    问题一:
    绘制线条不跟着鼠标移动涂抹
    解决:
    1.canvas标签的宽高一定要设置。
    2.必须在return中定义canvas:null以便方法中使用。
    问题二:
    在绘制完成后的清除方法completeMethod()中不要使用this.canvas否则当用户还没绘制时点击了清除会报错

    展开全文
  • Vue页面跳转动画效果的实现方法

    千次阅读 2020-12-28 21:17:30
    最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎兴趣的朋友多多指教。...
  • Vue教程(动画案例-列表动画)

    千次阅读 多人点赞 2019-07-23 18:09:08
      前面给大家介绍了动画的...Vue动画案例 1.基础页面   最基础的页面如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
  • 本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 结合 fabric.js 用canvas画布底图 实现鼠标拖动画布底图 实现鼠标滚动对画布底图进行放大缩小 2. 引入 fabric.js 2.1 npm 安装 npm install fabric --save 2.2 main.js 导入 import { fabric } from '...
  • vue中实现点击展开和收起功能(具有动画效果) html <div class="marketplace_aside_b"> <div v-for="item in classd" :key="item.id" class="marketplace_aside_show_that" >{{ item...
  • CanvasDemo.vue

    2020-05-26 00:26:22
    vue中实现图片框选功能,提供了完整的代码参考,可以将.vue文件直接放入项目查看效果,后续可以根据需要自主进行修改、新增功能
  • 该插件的目的是结合其他可用库的最佳属性,并添加独特的功能,这些功能在具有友好界面的易于使用的组件提供。 使用可用的选项,您可以非常快速地创建简单的圆圈。 但是,结合各种道具和一些想象力,您可以创造出...
  • Vue教程(动画-基础入门)

    千次阅读 2019-07-20 18:14:37
      在我们显示的页面动画对于我们来说虽然不是必须的,但是必要的一些动画效果能够提高用户的体验,帮助用户更好的理解页面功能。所以本文就来给大伙介绍下动画的基础内容。 Vue 动画 不带动画效果的案例  ...
  • 域名不同的图片可能存在跨域问题,看过很多资料没有太好的办法,最后项目是用node服务做了一个图片转为base64的接口,再给canvas绘制解决的。并不一定适用于其他项目,如果更好的办法解决欢迎分享。 导出坐标点...
  • vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js 是一款运行在浏览器的 3D 引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景...
  • vue用动画实现切换功能: Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数...
  • 主要介绍了Vue拖拽组件列表实现动态页面配置功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue项目使用天地图

    2021-01-08 13:47:20
    2.创建自己的vue项目,这里...引入到你项目的index.html文件 4.创建map.vue文件 <!-- 点击多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ this.loadmap() },
  • 通过示例了解Vue过渡和动画

    千次阅读 多人点赞 2021-05-24 08:18:52
    梦想,干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,一线大厂面试完整考点、资料以及我的系列文章。 Vue过渡和动画让我们...
  • vue实现购物车动画功能

    千次阅读 2017-07-17 22:04:12
    // 运动过程中有改变大小 if (end.width != null && end.height != null) { $.extend(true, start, { width: $element.width(), height: $element.height() }); } // 运动轨迹最高点top值 var vertex_top =...
  • 二、引入vue-esign 在main.js // 生成签名插件 import vueEsign from 'vue-esign' Vue.use(vueEsign) 三、定义画板和按钮 <div> <vue-esign style="border:2px solid #000" ref="esign" :width=...
  • vue baidu map vueBaiduMap 百度地图 搜索功能
  • vue 点击按钮 显示隐藏动画效果

    千次阅读 2021-02-09 18:05:13
    css鼠标移入移出(hover)的动画效果很方便给,但没有鼠标点击的动画效果,vue中有一个transition-group标签能够实现这一功能。 //注意需要加上key <div class="lyric-btn" @click="lyric()">词</div>...
  • Vue页面跳转动画效果实现

    千次阅读 2018-09-28 22:53:27
    最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎兴趣的朋友多多指教。...
  • vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样式完全移植自viewer.js关于viewer.js可以参考链接 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,611
精华内容 8,244
关键字:

vue有没有画中画功能

vue 订阅