Как скрыть / показать анимированные SVG в зависимости от активной вкладки? - PullRequest
Новая
       1

Как скрыть / показать анимированные SVG в зависимости от активной вкладки?

0 голосов
/ 22 ноября 2018

Скрипка и фрагмент ниже: https://jsfiddle.net/e130kr2x/

Я хочу, чтобы svg анимировался, когда одна из моих вкладок активна (достигнута), и не отображался или не исчезал, когда я открывал новую вкладку (не достигнуто),Эта новая вкладка теперь будет активной и анимирует svg и т. Д. (Выполнено).

- Первый вопрос: я скопировал svg в свой html для каждой вкладки.Есть ли способ сделать это только в CSS вместо копирования SVG в каждой вкладке?Я думал об атрибуте изображения, но он не поддерживает анимацию.

- Второй вопрос: у меня есть анимация SVG под каждой активной вкладкой, но она остается на неактивных вкладках.Как сделать так, чтобы он не отображался или не исчезал, когда вкладка становится неактивной?

Кроме того, вроде как не по теме, но если кто-то может показать мне, как переместить мой сценарий js в файл js вместо файла html, я 'буду благодарен.Я все еще новичок в JS.Спасибо за ваши предложения. 

#my-tab{
`      margin-top:20px;
   overflow:hidden;
   display:block;}

#my-tab ul.tabs{
   display:block;
   margin:0;
   padding:0;
   list-style-type:none;}

#my-tab ul.tabs > li{
   display:block;
   float:left;
   margin-bottom:0;
   padding:0;
   width:17%}

#my-tab ul.tabs li a{
    font-size:15px;
    height:45px;
    line-height:30px;
    margin:0;
    padding:7px 12px;
    text-decoration:none;
    width:auto;
    font-weight:700;
    color:#303030;}

.flex2 {
    display: flex;
    justify-content: space-evenly;
    flex-wrap:wrap;
    padding: 0 10px;}
 
 
 /* SVG ANIMATION bELLOW */
 
 #my-tab ul.tabs li a.active path {
  
     stroke:#6594F6;
     fill:#6594F6;
     stroke-dasharray:330;
     opacity:1;
     animation: animate 3s cubic-bezier(.27,.6,.8,.77);}

@keyframes animate {
  
  0% {
    opacity:0;
    fill:none;
    stroke-dashoffset:330;  
  }
  
  30% {
    opacity:1;
    fill:none;
    stroke-dashoffset:330;  
  }
  
  90% {
    fill: rgba(255,255,255,0);
   }
  
  100% {
    opacity:1;
    fill: rgba(255,255,255,1);
    stroke-dashoffset:0; 
  }
}
  
  
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>

<div class="product-description" itemprop="description">

<div id="my-tab" class="my-tab">

	<ul class="tabs">
      <div class="flex2">
        <li><a href="#tab-1"><span class="tab1 text-link1">
        
        
        Description
          
          
          	<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
	<g>
		<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
			c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
			c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
			L-260.1-275.3z"/>
	</g>
</g>
<g>
	<g>
		<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
			c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
			c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
			c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
	</g>
      </g>
  </svg>                 
          </span></a></li>
          
          
        <li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
        
        Livraison
          
          <svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
	<g>
		<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
			c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
			c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
			L-260.1-275.3z"/>
	</g>
</g>
<g>
	<g>
		<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
			c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
			c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
			c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
	</g>
      </g>
  </svg>        
          
          
    </a></li>
		<li><a href="#tab-3"><span class="tab4">
    
    
    Nos avantages
          
          <svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
	<g>
		<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
			c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
			c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
			L-260.1-275.3z"/>
	</g>
</g>
<g>
	<g>
		<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
			c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
			c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
			c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
	</g>
      </g>
  </svg>        
          
          </span></a></li>
      </div>
      
      
        <div id="tab-1">

          I'm the first

        </div>

         <div id="tab-2">

          I'm number 2
          
          </div>

         <div id="tab-3">

          I'm the last one. 

        </div>   
  </ul>

1 Ответ

0 голосов
/ 22 ноября 2018

Просто измените свойство display в зависимости от того, имеет ли вкладка класс .active, например: 

<style>
  #my-tab ul.tabs li a svg {
    display: none;
  }
  #my-tab ul.tabs li a.active svg  {
    display: block;
    height: auto;
  }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...