西安網(wǎng)頁交互設(shè)計比您想的要容易，現(xiàn)在網(wǎng)站建設(shè)都需要考慮交互設(shè)計，那么即好看又符合表達邏輯的交互設(shè)計是怎么做的呢？今天尼高網(wǎng)絡(luò)小編就帶大家一起來看看。

我們看到Web組件并沒有看上去那么可怕。我們查看了一個超級簡單的設(shè)置，并制作了一個帶有自定義<zombie-profile>元素的僵尸約會服務(wù)配置文件。我們?yōu)槊總€配置文件重用了該元素，并使用該元素在每個配置文件中填充了唯一信息<slot>。

那很酷，也很有趣（嗯，無論如何我還是很開心的……），但是如果我們使這個想法更具有互動性，該怎么辦？我們的僵尸資料很棒，但是對于想要成為有用的，世界末日后的約會體驗，您想“喜歡”僵尸甚至向他們發(fā)送消息。這就是我們在本文中要做的。我們將繼續(xù)瀏覽另一篇文章。（向左滑動適合僵尸嗎？）

讓我們暫停一秒鐘（好的，也許更長），然后看一下::slotted()偽元素。在上一篇文章發(fā)表后（感謝Rose?。鹆宋业淖⒁?，它解決了我遇到的某些（盡管不是全部）封裝問題。如果您還記得的話，我們在組件外部有一些CSS樣式，<template>而在中的<style>元素內(nèi)部有一些CSS樣式<template>。內(nèi)部的樣式<template>已封裝，但外部的樣式未封裝。

我想做的第一件事是添加一些動畫來使事情變得有趣。讓我們的僵尸個人資料圖片淡入并在負載下轉(zhuǎn)換。

初次嘗試時，我使用img和::slotted(img)選擇器直接為圖像設(shè)置動畫。但是我所得到的只是對Safari的支持。Chrome和Firefox不會在插入的圖片上運行動畫，但是默認的動畫圖片就可以了。為了使其正常工作，我將插槽中的.pic類包裝到了div中，然后將動畫應(yīng)用到了div中。