Question

我正在使用以下内容;但是余量并不像text-align:center;那么近似我无论如何都可以切换text-align: center;以进行动画转换，直到它达到text-align: center;点，类似于达到的值以下。

if ($(".resource-section").hasClass("resource-section--expanded")) {
     $(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}

Answer 1

根据我的理解，如果您想使用text-align:center属性，这样的事情对您有帮助，但text-align属性无法动画

＆＃13;

$(function(){


  $('.resources_header h2').click(function(){
  
        $(this).toggleClass('align-center');
  
  });


});

＆＃13;

.align-center{
 text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
  <div class="resources_header">
    
    <h2>HEADER</h2>
    
  </div>  
</div>

＆＃13;

这个问题就是动画，所以如果你想要实现的是从左到中动画，那么为什么不呢：

＆＃13;

$(function(){

  $('.resources_header h2').click(function(){
    
    
    var windowHalfWidth = $(window).width()/2;
    $(this).css('position','absolute');
    
    var elemHalfWidth = $(this).width()/2;           
    var left = windowHalfWidth - elemHalfWidth;
      $(this).animate({
         marginLeft: left
      },"slow",function(){
              $(this).css('position','static');
      });
  
  });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="resources_header">

    <h2>HEADER</h2>

  </div>
</div>

＆＃13;

Answer 2

您可以使用center像这样<{1}}进行动画制作

margin-left

var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);

.container {
  border: 1px solid black;
  height: 100px;
}

h1 {
  display: inline-block;
}

Answer 3

您可以使用中心技术，允许您水平居中任何元素。

只能使用CSS

进行动画制作

.test {
  position: absolute;
  transform: translateX(0%);
  left: 0%;
  animation: center 2s infinite;
}

@keyframes center {
  0%, 10% {
      transform: translateX(0%);
      left: 0%; 
  }
  90%, 100% {
      transform: translateX(-50%);
      left: 50%; 
  }
}

<h1 class="test">TEST</h1>

过渡动画到文本对齐：中心

3 个答案: