Vue自定义指令实现卡片翻转功能

更新时间：2023年11月14日 08:38:13 作者：傑丶

这篇文章主要给大家介绍了Vue自定义指令实现卡片翻转功能的代码示例,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的参帮助,需要的朋友可以参考下

效果预览

1 原理介绍

1.1 前置知识

backface-visibility

backface-visibility 是一个用于控制元素的背面是否可见的 CSS 属性。该属性通常用于在进行 3D 转换时，控制元素背面的可见性。

当元素进行 3D 转换时，其背面可能会变得可见，backface-visibility 属性就是用来控制这种可见性的。属性有两个可能的值：

visible：默认值。背面可见。
hidden：背面不可见，即不会显示。

如果设置了 backface-visibility: hidden; 盒子背面将不可见，把盒子绕 y 轴进行3d 旋转 180° 后，我们将看到盒子的背面。

backface-visibility 主要用于处理 3D 转换的情况，如果没有使用 3D 转换，该属性的效果可能不会显著。

transform-style: preserve-3d

transform-style: preserve-3d 主要用于配合 CSS 3D 变换，它告诉浏览器在进行 3D 变换时应该如何处理子元素。当给父元素应用 transform-style: preserve-3d 时，其子元素将以三维的方式定位，而不是被扁平化到同一个平面。

必须在父盒子上加上这个属性，因为这里是父盒子翻转带动子盒子，如果不加上这个属性，子盒子中的back背面将显示不出来！

1.2 步骤分析

首先你需要一个大盒子，里面包含两个小盒子，这里第一个小盒子为正面内容，第二个小盒子为反面内容。结构如下：

    <div class="card">
      <div class="front">front</div>
      <div class="back">back</div>
    </div>

      .card {
        height: 270px;
        width: 270px;
        margin: 40px auto;
        border: 1px solid #f00;
        position: relative;
      }
      .front,.back {
        width: 100%;
        height: 100%;
      }

      .front {
        background-image: url(./imgs/youli.png);
        background-repeat: no-repeat;
        background-size: cover;
      }

      .back {
        background-image: url(./imgs/erha.jpg);
        background-repeat: no-repeat;
        background-size: cover;
      }

加上上面样式后得到如下效果：

上面的效果显然不满足翻转卡片的前置条件，思考一下我们想要达到的效果：

首先，正面和背面应该叠在一起。

实现：绝对定位。
叠在一起的初始状态应该只显示正面，隐藏背面。

实现：

默认将正面css设置为：transform: rotateY(0deg); backface-visibility: hidden;

默认将背面css设置为：transform: rotateY(180deg); backface-visibility: hidden;

这样初始状态下只显示正面内容，背面会自动隐藏。
翻转后应该显示背面，隐藏正面。

实现：将父盒子沿y轴翻转 180度，这样子盒子 front 会旋转到背面去，从而隐藏。子盒子 back 会旋转到正面，从而显示。通过点击父盒子添加移除 flipped 类名，从而实现翻转功能。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>卡片旋转效果</title>
    <style>

      .card {
        height: 270px;
        width: 270px;
        margin: 40px auto;
        border: 1px solid #f00;
        position: relative;

        transform-style: preserve-3d;
        transition: transform 0.5s;
        perspective: 0px;
      }

      .card.flipped {
        transform: rotateY(180deg);
      }

      .front,.back {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }

      .front {
        background-image: url(./imgs/youli.png);
        background-repeat: no-repeat;
        background-size: cover;

        backface-visibility: hidden;
        transform: rotateY(0deg);
      }

      .back {
        background-image: url(./imgs/erha.jpg);
        background-repeat: no-repeat;
        background-size: cover;

        transform: rotateY(180deg);
        backface-visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="front">front</div>
      <div class="back">back</div>
    </div>

    <script>
      const card = document.querySelector('.card')
      card.addEventListener('click', function() {
        this.classList.toggle('flipped')
 
      })
    </script>
  </body>
</html>

2 用 Vue 自定义指令实现卡片翻转

这里自定义指令的用法就不再介绍了，直接贴上实现代码：

Vue.directive('flip', {
    bind: function (el, binding) {
        // console.log('bind', el.children.length, binding.value)
        el.style.position = 'relative'
        el.style.transformStyle = 'preserve-3d'
        el.style.transition = 'transform 0.5s'

        el.initChidren = (el, binding) => {
          // console.log(el.children.length)
          if (el.children.length !== 2) {
            return
          }

          if (binding.value) {
            el.style.transform = 'rotateY(180deg)'
          } else {
            el.style.transform = 'rotateY(0deg)'
          }

          for (let i = 0; i < el.children.length; i++) {
            const element = el.children[i]
            element.style.position = 'absolute'
            element.style.position = 'absolute'
            element.style.width = '100%'
            element.style.height = '100%'
            element.style.left = 0
            element.style.top = 0
            if (i === 0) {
              element.style.backfaceVisibility = 'hidden'
              element.style.transform = 'rotateY(0deg)'
            }
            if (i === 1) {
              element.style.backfaceVisibility = 'hidden'
              element.style.transform = 'rotateY(180deg)'
            }
          }
        }

        el.initChidren(el, binding)
      },

      // inserted: function (el, binding) {
      //   console.log('inserted', el, binding.value)
      // },

      // update: function (el, binding) {
        // console.log('update', el, binding)
      // },

      componentUpdated: function (el, binding) {
        // console.log('componentUpdated', el, binding.value)
        console.log(el.children.length)

        // el.innerHTML 更新之后先重置子元素css属性，再初始化
        for (let i = 0; i < el.children.length; i++) {
          const element = el.children[i]
          element.style.backfaceVisibility = 'visible'
          element.style.transform = 'rotateY(0deg)'
        }

        el.initChidren(el, binding)
      },

      // unbind(el) {
        // 在解绑时移除事件
      // },
    
})

组件中使用（注意 html 结构必须如下）：

<template>
    <div class="flipped_card" v-flip="isFlipped" @click="handleFlippedClick">
        <div class="front">front</div>
        <div class="back">back</div>
    </div>
</template>
<script>
  data() {
    return {
      isFlipped: false,
    }
  },
  
  methods: {
    handleFlippedClick() {
      if (!this.isFlipped) {
        this.isFlipped = true
      } else {
        this.isFlipped = false
      }
    },
  }    
</script>

以上就是Vue自定义指令实现卡片翻转功能的详细内容，更多关于Vue实现卡片翻转的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue实现动态样式的多种方法汇总
本文要给大家介绍Vue实现动态样式的多种方法，下面给大家带来几个案列，需要的朋友可以借鉴研究一下。
2021-06-06
实例讲解v-if和v-show的区别
今天小编就为大家分享一篇关于实例讲解v-if和v-show的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue3.0中如何监听props方法
这篇文章主要介绍了Vue3.0中如何监听props方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中Npm run build 根据环境传递参数方法来打包不同域名
这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx，根据传递参数xxx来判定不同的环境，给出不同的域名配置，具体内容详情大家参考下本文
2018-03-03
vue-resouce设置请求头的三种方法
本篇文章主要介绍了vue-resouce设置请求头的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue+iview框架实现左侧动态菜单功能的示例代码
这篇文章主要介绍了vue+iview框架实现左侧动态菜单功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
vue封装TabBar组件的完整步骤记录
组件封装是为了复用,换成大白话就是,同样的事情我不想做第二遍,节省出来的时间用来看动漫不香吗,下面这篇文章主要给大家介绍了关于vue封装TabBar组件的完整步骤,需要的朋友可以参考下
2021-10-10
详解vue-cli3开发Chrome插件实践
这篇文章主要介绍了vue-cli3开发Chrome插件实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue3 provide和inject底层组件的值不是响应式的处理详解
这篇文章主要为大家介绍了vue3 provide和inject底层组件的值不是响应式的处理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue数组响应式操作及高阶函数使用代码详解
这篇文章主要介绍了Vue数组响应式操作及高阶函数使用代码详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08