小编Fig*_*Ali的帖子

如何在Vue.js中获取随机元素

我有3个英雄图像及其内容,我想在用户刷新页面时随机显示它们!

基本上我试图在加载页面上使用Jquery显示随机div,但问题是英雄图像的大小很大并且通过使用Jquery,所有这3个图像开始加载,DOM这会影响页面的速度.

在Vue.js中是否有任何解决方案可以一次加载一个特定div的,而不是divs用户刷新页面时全部3个!?

<div class="slider-item"> <img src="../../../static/img/slides/slide1.png" alt="Hello"> 
       <div class="carousel-caption"> 
           <h2>Lipsum Heading</h2> 
               <h4>Lipsum dummy content body test dummy goes here.</h4> 
       </div> 
   </div>
Run Code Online (Sandbox Code Playgroud)

jQuery代码:

mounted()
{
 var random = Math.floor(Math.random() * $('.slider-item').length);
 $('.slider-item').eq(random).show();
},
Run Code Online (Sandbox Code Playgroud)

javascript jquery vue.js vue-component vuejs2

5
推荐指数
1
解决办法
5304
查看次数

SVG-可以在一侧添加笔划-dasharray渐变或透明形式

我创建了一个SVG动画,允许笔触-dasharray移动。如示例中所示,是否可以向笔触-dasharray的尾部添加渐变并使一侧保持透明?

在此处输入图片说明

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }
Run Code Online (Sandbox Code Playgroud)
<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="300px" height="200px" viewBox="0 0 685 310">
  <g class="st2">
	<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
	c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
	C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
  </g>
	<use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">
		<animate attributeName="stroke-dashoffset"
	    	from="200"  to="-1710"
	    	begin="0s" dur="10s"
	    	repeatCount="indefinite"/>  
	</use>

	<circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
	<animateMotion
		xlink:href="#plug"
	  	dur="10s"
		rotate="auto"
		repeatCount="indefinite"
		calcMode="linear"
		keyTimes="0;1"    
		keyPoints="0;1">
		<mpath xlink:href="#loop-normal"/>
	</animateMotion> 
</svg> …
Run Code Online (Sandbox Code Playgroud)

html css animation svg stroke-dasharray

5
推荐指数
1
解决办法
369
查看次数

如何在SASS [scale-color]函数中使用CSS变量?

类似的问题,但需要此帮助,我想使用两个 css 变量--color-primary和来更改整体网站颜色--color-secondary,因为我在管理仪表板中有两个颜色选项。管理员可以根据每个上市公司的品牌更改其颜色。

所以我有 5 种颜色,两种是深色的,另外三种是来自同一颜色系列的浅色。

我想在某些地方将深色转换为浅色。这是我的代码,它不起作用。 代码笔

:root {
--color-primary: blue;
--color-secondary: red;
}

$primary : var(--color-primary);

//convert to light form primary color
$bg-color : scale-color($primary, $lightness:80%);

.logo{
  background: $bg-color;
  height: 100px;
  width:100px;
} 
Run Code Online (Sandbox Code Playgroud)

有人知道我该如何解决这个问题吗?还是根本不可能?提前致谢。

css variables sass colors css-selectors

5
推荐指数
1
解决办法
3272
查看次数