美图秀秀拼接渐变过渡

by Anthony Ng

由Anthony Ng

如何使用Web组件创建渐变过渡 (How to use web components to create gradient transitions)

In this article, we will learn about Web Components. We will build a simple Web Component that transitions its gradient color.

在本文中，我们将学习Web组件。 我们将构建一个简单的Web组件，以转换其渐变颜色。

Web Components are a suite of different technologies that allow you to create reusable custom elements. Using a custom element is no different than using a <div />. You can create instances in your HTML. You can create an instance with JavaScript. You can attach event listeners to custom elements.

Web组件是一套不同的技术，可让您创建可重复使用的自定义元素。 使用自定义元素与使用<div />没什么不同。 您可以在HTML中创建实例。 您可以使用JavaScript创建实例。 您可以将事件侦听器附加到自定义元素。

Have you ever looked at the HTML specs and thought the authors left out an important element? This is the solution for you. Custom elements provide a way for developers to build their own fully-featured DOM elements.

您是否曾经看过HTML规范，并认为作者遗漏了重要元素？ 这是您的解决方案。 自定义元素为开发人员提供了一种构建自己的功能齐全的DOM元素的方法。

自定义元素和Web组件之间的区别？ (Difference between Custom Elements and Web Components?)

Many use the terms Custom Elements and Web Components interchangeably. Web Components are a suite of different technologies, which includes Custom Elements, Shadow DOM, and HTML Imports. Custom Elements has its own specifications (see here).

许多术语可互换使用“自定义元素”和“ Web组件”。 Web组件是一套不同的技术，其中包括“自定义元素”，“阴影DOM”和“ HTML导入”。 Custom Elements有其自己的规范( 请参阅此处 )。

Web Components are a native feature of the browser. You don’t need external libraries to use this functionality. You can see the browser support table here labeled Browser Support.

Web组件是浏览器的本机功能。 您不需要外部库即可使用此功能。 您可以在此处看到标记为Browser Support的浏览器支持表 。

You can see the support for Custom Elements here.You can see the support for templates here.You can see the support for Shadow DOM here.

您可以在此处查看对“自定义元素”的支持。 您可以在此处查看对模板的支持。 您可以在此处查看对Shadow DOM的支持。

这是React吗？ (So this is React?)

React and Web Components solve different problems. Web Components provide strong encapsulation for reusable components. React provides a declarative library that keeps the DOM in sync with your data.React makes no differentiation between a native HTML element and a Web Component. It would handle your custom built Web Component like it does a normal HTML element.

React和Web组件解决了不同的问题。 Web组件为可重用的组件提供了强大的封装。 React提供了一个声明式库，使DOM与您的数据保持同步.React不会在原生HTML元素和Web组件之间进行区分。 它会像处理普通HTML元素一样处理您自定义构建的Web组件。

See this example of a React application using a Web Component.

请参阅此使用Web组件的React应用程序的示例。

The React documentation also shows how you can use React within your Web Components. I haven’t found a scenario that would warrant importing React.

React文档还显示了如何在Web组件中使用React。 我还没有找到可以导入React的场景。

让我们过渡渐变背景 (Let’s transition gradient backgrounds)

We’re going to build a gradient Web Component like the one below.

我们将构建一个类似于下面的渐变Web组件。

Notice how it transitions between gradient backgrounds. We cannot transition backgrounds by default. See Codepen here.

注意它是如何在渐变背景之间转换的。 默认情况下，我们无法转换背景。 请参阅此处的Codepen 。

But we can transition opacity. See Codepen here.

但是我们可以转变不透明度。 请参阅此处的Codepen 。

We can take advantage of this with CSS pseudo-classes to get the desired effect. See Codepen here.

我们可以将其与CSS伪类一起利用以获得所需的效果。 请参阅此处的Codepen 。

We can take advantage of this with the CSS “before” pseudo-class to get the desired effect. See Codepen here.

我们可以利用CSS“ before”伪类来利用这一点，以获得所需的效果。 请参阅此处的Codepen 。

There is a layer (<div />) with a gradient color. There is a second layer (div::before) with a different gradient color. This second layer sits on top of the first layer and has opacity: 0. To start the gradient transition, we transition the second layer’s opacity from 0 to 1. This gives us the effect that the gradient is transitioning.

有一个具有渐变颜色的图层( <div />)。 还有另一个具有不同渐变颜色的ayer (div:: before)。 该第二层位于所述第一层的顶部d has opac两者均：0.要启动梯度过渡，我们转换所述第二层的不透明度，从0到1。这使我们认为梯度被转变的效果。

As a developer, that’s a lot of things you have to know about. Wouldn’t it be nice to have a simple, declarative way of using this gradient? Imagine an HTML element called <my-gradient-background />. It accepts a gradient attribute that takes a gradient color, like “red, white, blue”. When we change the gradient, the gradient color will transition like we want. That is what we are going to create.

作为开发人员，您需要了解很多事情。 有一个简单的，声明性的方式使用此渐变会不好吗？ 想象一个名为<my-gradient-background />HTML元素。 它ACCE pts a gr adient属性，需要一个渐变的颜色，像“红，白，蓝”。 当我们畅e the gr adient，渐变颜色过渡会像我们想要的。 那就是我们要创造的。

构建Web组件 (Building the web component)

To create a new Web Component, we declare a new class that extends HTMLElement.

为了创建一个新的Web组件，我们声明一个扩展HTMLElement的新类。

If you want to extend the functionality of an existing HTML element, you can extend from them instead. For example, to extend the functionality of a <p />, you would extend HTMLParagraphElement.

如果要扩展现有HTML元素的功能，则可以从其扩展。 例如，要扩展<p />的功能，您可以xtend HTMLParagraphE元素。

We attach a shadow root to our web component. The shadow DOM API lets us attach DOM to our gradient element. This shadow DOM is encapsulated in our component and is (generally) hidden from the rest of the DOM. You can read more about Shadow DOM here.

我们将影子根附加到我们的Web组件。 影子DOM API使我们可以将DOM附加到渐变元素上。 此影子DOM封装在我们的组件中，(通常)对其余DOM隐藏。 您可以在此处阅读有关Shadow DOM的更多信息 。

In our shadow DOM, we add some styling for the gradient element. We use a <div class=”after” /> instead of a pseudo-element here. This is because we want to reference this layer with JavaScript. We can’t reference pseudo-elements with JavaScript.

在我们的影子DOM中，我们为渐变元素添加了一些样式。 我们在这里使用<div class=”after” />而不是伪元素。 这是因为我们要使用JavaScript引用此层。 我们无法使用JavaScript引用伪元素。

The host element is the gradient element itself. We can style it as if it were a <div /> element.

host元素是渐变元素本身。 我们可以将其样式设置为好像是一个<div />元素。

In the observed attributes, we return a list of HTML attributes that we want to watch. When these watched attributes change, our a callback function will fire.

在观察到的属性中，我们返回要观看HTML属性的列表。 当这些受监视的属性更改时，我们的回调函数将触发。

Our attributeChangedCallback function fires whenever an observed attribute changes. We get 3 arguments in our callback function. The first argument is the name of the attribute that changed. The second argument is the value of the attribute before it changed. The third argument is the value of the attribute after it changed.

只要观察到的属性发生更改，我们的attributeChangedCallback函数就会触发。 我们在回调函数中得到3个参数。 第一个参数是已更改属性的name 。 第二个参数是属性更改之前的值。 第三个参数是属性更改后的值。

In our callback function, we update our “after” element.

在回调函数中，我们更新“ after”元素。

We update our “after” element’s background color with the new gradient color. We also set its opacity to 1. Our “after” element will start fading in, creating our desired effect. We want to do some cleanup code when the “after” element has finished fading in.

我们使用新的渐变色更新“ after”元素的背景色。 我们还将其不透明度设置为1。“ after”元素将开始逐渐消失，从而产生所需的效果。 当“ after”元素逐渐消失时，我们想做一些清理代码。

Our “after” element does all the work of creating the gradient transition effect. We set our “host” element to the new gradient color. We hide the “after” element so that it’s ready for the next fade in. That is all the clean up we need.

我们的“之后”元素完成了创建渐变过渡效果的所有工作。 我们将“宿主”元素设置为新的渐变颜色。 我们隐藏“ after”元素，以便为下一次淡入做好准备。这就是我们需要的所有清理工作。

To use this new Web Component, we have to define it like so.

要使用这个新的Web组件，我们必须像这样定义它。

Now, you’ll be able to use <my-gradient-background /> like a normal HTML element.

现在，您将能够像普通HTML元素一样使用<my-gradient-background />。

You can view the complete code here. Feel free to download it with npm install — save my-gradient-background.

您可以在此处查看完整的代码。 随时使用npm install — save my-gradient-background下载它npm install — save my-gradient-background 。

参考文献 (References)

• https://developers.google.com/web/fundamentals/web-components/customelements

  https://developers.google.com/web/fundamentals/web-components/customelements

• https://www.webcomponents.org/introduction

  https://www.webcomponents.org/introduction

• https://developer.mozilla.org/en-US/docs/Web/Web_Components

  https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

• https://reactjs.org/docs/web-components.html

  https://reactjs.org/docs/web-components.html

• https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements

  https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements

• https://w3c.github.io/webcomponents/spec/custom/#custom-elements

  https://w3c.github.io/webcomponents/spec/custom/#custom-elements

翻译自: https://www.freecodecamp.org/news/use-web-components-to-create-gradient-transitions-f9aad648824a/

美图秀秀拼接渐变过渡